Examples

Code blocks and source editing

RichTextEditor does not bundle CodeMirror. Two things it does ship cover most of what people reach for CodeMirror to do: a syntax-highlighted code block you insert into the document, and an HTML source view on the toolbar. Both are below; if you still want CodeMirror as the source pane, that code is at the end.

Code as content

A code block is part of the document — it saves with everything else and survives a round trip. This is the one you want for documentation, a knowledge base, or a comment thread.

// The built-in code block — nothing to install.
editor.execCommand("insertcode");

// The dialog asks for the language and the source, and inserts a highlighted
// block into the document. It is CONTENT: it saves with the document and
// survives a round trip through getHTMLCode() / setHTMLCode().

Saved HTML

Loading…

Editing the document’s own HTML

That is a different job from a code block: it edits the markup of the document itself rather than adding content to it. The editor has a source view built in — use the toolbar’s source button, or drive it from your own UI with getHTMLCode() and setHTMLCode().

Swapping in CodeMirror

If you want CodeMirror’s editing affordances for that source pane, load it yourself and keep the two sides in sync through the same two calls. The editor does not need to know.

// If you want CodeMirror as the SOURCE view instead of the built-in one:
var editor = new RichTextEditor("#div_editor1");

// Take over the source toggle, and keep the two in sync yourself.
var cm = CodeMirror(document.querySelector("#source-pane"), {
    mode: "htmlmixed",
    value: editor.getHTMLCode()
});

cm.on("change", function () {
    editor.setHTMLCode(cm.getValue());
});

Getting HTML content from the editor · Configuration reference