CKEditor SDK

Source Code Editing Documentation

Although CKEditor strength lies in WYSIWYG editing, the underlying format of the editor content is usually HTML. However, working directly with HTML code is also possible thanks to the source code editing feature provided by the Source Editing Area and Source Dialog plugins.

Both plugins introduce the   Source toolbar button. Refer to the Source Code Editing article to learn more about this feature as well as the functional differences between the plugins.

The following editor instances show how both plugins can be combined with classic and inline editor.

Classic Editor with Default Source Editing Area

Inline Editor with Source Dialog

This inline editor instance is using the Source Dialog plugin for source editing.

Follow the steps below to try it out:

  • Click the Source button to display the HTML source of this text in the Source dialog window.
  • Close the Source dialog window to return to the WYSIWYG view.

The following configuration option was used:

config.extraPlugins = 'sourcedialog';

Classic Editor with Source Dialog

Related Features