CKEditor Samples » Editing source code in a dialog

Sourcedialog plugin provides an easy way to edit raw HTML content of an editor, similarly to what is possible with Sourcearea plugin for classic (iframe-based) 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 classic and inline instances. To enable this plugin, basically add extraPlugins: 'sourcedialog' to editor's config:

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

// Classic (iframe-based) 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 classic editor 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.