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.

This is some sample text. You are using CKEditor.