Unsaved changes

Leaving a page with unsaved edits loses them. With confirmLeave: true, the browser asks "Leave site?" whenever there are changes that have not been saved.

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 = 'Save';
    const show = () => { state.textContent = ed.isDirty() ? 'Unsaved' : 'Saved'; };
    save.onclick = () => { ed.markClean(); show(); };
    ed.on('change', show);
    ed.statusEl.prepend(state, save);
    show();
  },
});

Three pieces

• isDirty(): true when the content differs from what was loaded, or from the last markClean(). Undo back to the same text and it is false again.
• markClean(): mark the current content as saved. Call it after your server save succeeds.
• confirmLeave: when true, leaving the page (beforeunload) asks only if isDirty() is 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(); // leaving no longer asks
}

An editor on a <textarea> counts a form submit as a save, so the submit button does not trigger the prompt.

Options