Editing source code in a dialog — CKEditor Sample
Description: Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.

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

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="https://ckeditor.com/">CKEditor</a>.