HTML source view

The source button turns the editing area into an HTML code view. Use it to fix tags by hand or to drop in HTML made elsewhere. Press it again and the edited HTML goes back into the editor.

createEditor('#editor', {
  toolbar: 'heading | bold italic | link | source',
});

Using it

• Shortcut: Ctrl+Shift+U opens and closes it.
• The HTML is shown indented, with tags and attributes colored.
• Tab inserts two spaces instead of moving focus.
• On close, the HTML is filtered through the allow-list (no <script>, no on* attributes) and applied as an undoable change.
• Closing without edits leaves the content untouched, with no undo step.
• While it is open, only source, preview, print, fullscreen, help, undo and redo work.

The toolbar item is source, in the ⋯ menu of the board (default) and full presets. In code, editor.toggleSource() opens and closes it, and the source event reports open (true) or closed (false).

editor.on('source', (open) => {
  saveButton.disabled = open; // close the code view before saving
});
editor.toggleSource(true);

Calling getHTML() while the code view is open returns the filtered HTML from the code view, so nothing is lost.

Options