Source editing

The SourceEditing feature provides the ability for viewing and editing the source of the document. The source editing plugin is a low-level document editing interface, while all the buttons and dropdowns located in a editor’s toolbar are high-level ones.

The changes made to the document source will be applied to the editor’s data model only, if the editor understands (via loaded plugins) the given syntax. You will lose all changes that the editor features cannot understand. For example, if the editor does not have a horizontal line plugin loaded, the <hr> tag added in the document source will be removed upon exit from the source editing mode.

# Demo

Use the editor below to see the source editing plugin in action. Toggle the source editing mode , make some changes in the HTML code (i.e. add new paragraphs or an ordered list), and go back to see that they are present in the document content. You can also use one of the numerous CKEditor 5 features available via the toolbar and observe how they render in the HTML source. Notice the collapsible table of contents, available thanks to the General HTML support feature and introducing HTML elements not yet covered by official plugins.

# Markdown source view

The source editing plugin also works well with the Markdown output plugin. No special configuration is needed, it is enough to add the plugin to the editor to change the source editing mode to display Markdown instead. Please remember that Markdown syntax is very simple and it does not cover all the rich-text features. Some features provided by CKEditor 5 – either native or introduced via the GHS feature – can thus be only presented as native HTML as they have no Markdown equivalent and will be stripped in the source view below.

# Related features

There are other source-related CKEditor 5 features you may want to check:

• General HTML support – Allows enabling a generic support for additional HTML features not yet covered by official plugins.
• HTML embed – Allows embedding an arbitrary HTML snippet in the editor.
• Autoformatting – Allows using Markdown-like shortcodes to format the content on the go.
• Markdown output – Allows for Markdown output instead of HTML output.

# Installation

To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-source-editing package:

npm install --save @ckeditor/ckeditor5-source-editing

And add it to your plugin list configuration:

import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ SourceEditing, ... ],
        toolbar: [ 'sourceEditing', ... ]
    } )
    .then( ... )
    .catch( ... );

To utilize the Markdown source editing mode just add the Markdown output plugin to the editor.

import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ SourceEditing, Markdown, ... ],
        toolbar: [ 'sourceEditing', ... ]
    } )
    .then( ... )
    .catch( ... );

# Common API

The SourceEditing plugin registers:

• The 'sourceEditing' UI button component.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-source-editing.