Read-only

For approved documents, closed posts, or viewers without edit rights: the content looks the same as in the editor but cannot be changed. Start with readOnly: true or switch with editor.setReadOnly(true).

createEditor('#editor', {
  toolbar: 'heading | bold italic | link | preview fullscreen',
  readOnly: true,
  onReady: (ed) => {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.textContent = 'Edit';
    btn.onclick = () => {
      ed.setReadOnly(!ed.readOnly);
      btn.textContent = ed.readOnly ? 'Edit' : 'Make read-only';
    };
    ed.statusEl.prepend(btn);
  },
});

What changes

• No typing or pasting, and no caret.
• Most toolbar buttons are disabled. These stay on: findReplace, preview, print, fullscreen, help.
• Checklist boxes do not toggle, and clicking images, tables or boxes does not bring up their bars.
• Folded sections (Details) show folded as saved, and readers can open them. Back in edit mode they open up again.
• The editor gets the is-readonly class for your CSS.

const editor = createEditor('#editor', { readOnly: !canEdit });

editButton.addEventListener('click', () => editor.setReadOnly(false));
console.log(editor.readOnly); // current state

For a plain view page, putting the saved HTML into the page is lighter than loading an editor.

Options