CKEditor Samples » Editing source code in a dialog

This sample is not maintained anymore. Check out its brand new version in CKEditor Examples.

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.