CKEditor Samples » Raw HTML editing with dialog-based source editor

Sourcedialog plugin provides an easy way to edit raw HTML content of an editor, similarly to what is possible with Sourcearea plugin for framed instances but using dialogs. Thanks to that, it's also possible to manipulate raw content of inline editor instances.

This 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: 'sourcedialog' to editor's config:

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

// Framed editor.
CKEDITOR.replace( 'textarea_id', {
	extraPlugins: 'sourcedialog',
	removePlugins: 'sourcearea'
});

Note that you may want to include removePlugins: 'sourcearea' in your config when using Sourcedialog in framed instances. This prevents feature redundancy.

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.