문서 › 저장과 출력

저장 안 한 변경 알림

isDirty, markClean, confirmLeave 로 저장 안 하고 나가는 것 막기.

글을 고쳐 놓고 저장하지 않은 채 다른 페이지로 가면 쓴 내용이 날아갑니다. confirmLeave: true 를 주면 저장하지 않은 변경이 있을 때 브라우저가 "사이트에서 나가시겠습니까?" 를 묻습니다.

직접 써 보기

이 데모의 코드

createEditor('#editor', {
  toolbar: 'bold italic underline | link',
  confirmLeave: true,
  onReady: (ed) => {
    const state = document.createElement('span');
    const save = document.createElement('button');
    save.type = 'button';
    save.textContent = '저장';
    const show = () => { state.textContent = ed.isDirty() ? '저장 안 됨' : '저장됨'; };
    save.onclick = () => { ed.markClean(); show(); };
    ed.on('change', show);
    ed.statusEl.prepend(state, save);
    show();
  },
});

세 가지 API

isDirty(): 처음 불러온 내용, 또는 마지막 markClean() 때와 지금 내용이 다르면 true. 고쳤다가 되돌려 같아지면 다시 false 입니다.
markClean(): 지금 내용을 "저장됨"으로 표시합니다. 서버 저장이 성공한 뒤 부르세요.
confirmLeave: true 면 페이지를 떠날 때(beforeunload) isDirty() 가 true 인 경우에만 묻습니다.

const editor = createEditor('#editor', { confirmLeave: true });

async function save() {
  const res = await fetch('/posts/12', { method: 'PUT', body: editor.getHTML() });
  if (res.ok) editor.markClean(); // 이제 나가도 묻지 않습니다
}

<textarea> 에 붙인 에디터는 폼을 전송할 때 저장된 것으로 칩니다. 그래서 등록 버튼으로 이동할 때는 묻지 않습니다.

옵션

이름	타입	기본값	설명
`confirmLeave`	boolean	`false`	저장 안 한 변경이 있으면 떠나기 전에 묻기
`isDirty()`	method	-	마지막 저장 뒤 바뀌었으면 true
`markClean()`	method	-	지금 내용을 저장됨으로 표시