Editing source code in a dialog — CKEditor Sample

# 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.

Inline editor:

This is some sample text. You are using CKEditor.

Classic editor: This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.