CKEditor CodeMirror Plugin

Inline/Framed Source Dialog

The CodeMirror plugin also extends the Source Dialog, with the Source Dialog you can edit the raw HTML content of an editor with Syntax Highlighting.

This SourceDialog plugin extends the toolbar with a button, which opens a dialog window with a source code editor. It works with both framed and inline instances. To enable this plugin, basically add extraPlugins: 'codemirror,sourcedialog' to editor's config:

// Inline editor.
CKEDITOR.inline( 'editable', {
                extraPlugins: 'codemirror,sourcedialog'
});
// Framed editor.
CKEDITOR.replace( 'textarea_id', {
                extraPlugins: 'codemirror,sourcedialog'
});

Note that editable in the code above is the id attribute of the <div> element to be converted into an inline instance.

Note that textarea_id in the code above is the id attribute of the <textarea> element to be replaced with CKEditor.

Inline editor:

This is some sample text. Click to edit. You are using CKEditor.

Demos