자동 저장

autosave 를 켜면 쓰던 글을 몇 초마다 브라우저(localStorage)에 임시로 저장합니다. 창을 닫거나 브라우저가 꺼졌다가 다시 열면 에디터 위에 "작성 중이던 글이 있어요" 띠가 뜨고, 복구 또는 버리기를 고를 수 있습니다.

createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList',
  autosave: { key: 'docs-autosave-demo', interval: 1000 },
});

동작

• 내용이 바뀐 경우에만 interval 마다 저장합니다 (기본 3초). 에디터를 없앨 때(destroy())도 한 번 저장합니다.
• 저장 키는 e82:draft: 뒤에 key 를 붙인 것입니다. key 를 주지 않으면 페이지 경로(location.pathname)를 씁니다.
• 에디터를 열 때 저장된 초안이 처음 내용과 다르면 복구 띠를 보여 줍니다. 복구하면 실행 취소할 수 있는 변경으로 들어갑니다.
• 내용을 모두 지우면 저장된 초안도 지웁니다.
• <textarea> 에 붙인 에디터는 폼을 전송할 때 초안을 알아서 지웁니다.

저장한 뒤 초안 지우기

fetch 로 저장하는 화면이라면 저장이 성공한 뒤 clearAutosave() 를 부르세요. 그래야 다음에 열 때 이미 저장한 글을 다시 복구하자고 묻지 않습니다.

const editor = createEditor('#editor', {
  autosave: { key: 'board-write' },
});

saveButton.addEventListener('click', async () => {
  const res = await fetch('/posts', { method: 'POST', body: editor.getHTML() });
  if (res.ok) {
    editor.clearAutosave();
    editor.markClean();
  }
});

초안은 그 브라우저에만 남습니다. 다른 기기로 옮겨 가지 않고, 공용 PC에서는 다음 사람이 볼 수 있습니다. 실수로 지운 내용을 되돌리는 기능은 이전 버전, 저장 안 한 채 나가는 것을 막는 기능은 저장 안 한 변경 알림을 보세요.

옵션