Migration from CKEditor 4

Extending the list of HTML tags or attributes that CKEditor should support can be achieved via the General HTML Support feature. The GHS allows adding HTML markup not covered by official CKEditor 5 features into the editor's content. Such elements can be loaded, pasted, or output. It does not, however, provide a dedicated UI for the extended HTML markup.

Having full-fledged HTML support can be achieved by writing a plugin that (ideally) provides also means to control (insert, edit, delete) such markup. For more information on how to create plugins check the Creating a simple plugin article. Looking at the source code of CKEditor 5 plugins may also give you a lot of inspiration.

Note that only content that is explicitly converted between the model and the view by the editor plugins will be preserved in CKEditor 5. Check the conversion tutorials to learn how to extend the conversion rules.

These settings are no longer needed as by default, CKEditor 5 automatically grows with content.

Classic editor (CKEditor 5) no longer encapsulates the editing area in an <iframe>, which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example, the minHeight and maxHeight settings can be achieved with the following code:

.ck.ck-content:not(.ck-comment__input *) {
    /* Note: You can use min-height and max-height instead here. */
    height: 300px;
    overflow-y: auto;
}
            

Classic editor (CKEditor 5) no longer encapsulates the editing area in an <iframe>, so such setting is no longer needed. Simply wrap the editor with a <div class="..."> to achieve a similar result. When using balloon, balloon block, inline or decoupled editor you may add a class to the element on which the editor is initialized.

Additionally, all editor types use .ck-content on their main root editable elements. This class can thus also be used to write stylesheet rules for the editor content.

Classic editor (CKEditor 5) no longer encapsulates the editing area in an <iframe>, so such setting is no longer needed. Simply wrap the editor with a <div id="..."> to achieve a similar result. When using balloon, balloon block, inline or decoupled editor you may add a class to the element on which the editor is initialized.

Additionally, all editor types use .ck-content

Refer to the Code block feature guide to learn more about support for blocks of pre–formatted code in CKEditor 5.

A plugin adding support for the inline <code> element is included in the Basic styles package.
Note: The Code feature is not available by default in any build, but can be enabled in a custom build (see the Basic styles feature guide).

Refer to the Font feature guide to learn more about configuring font and background color in CKEditor 5.

At the same time, we also provide a new highlight plugin which allows for highlighting parts of the text with the <mark> element with different CSS classes that can be easily styled. See the Highlight feature guide for more information .

CKEditor 5 uses the <sub> element.

Note: The Subscript feature is not available by default in any build, but can be enabled in a custom build (see the Basic styles feature guide).

CKEditor 5 uses the <sup> element.

Note: The Superscript feature is not available by default in any build, but can be enabled in a custom build (see the Basic styles feature guide).

CKEditor 5 uses the <u> element, see Editor Recommendations - Underline.

Note: The Underline feature is not available by default in any build, but can be enabled in a custom build (see the Basic styles feature guide).

Note: An official integration of the spell and grammar checking functionality for CKEditor 5 is provided by a partner solution, WProofreader.

A dedicated configuration option to disable the native browser spell checker is unavailable. However, in case of inline, balloon and balloon block editors it can be done by setting the spellcheck attribute directly on the element where CKEditor should be enabled.

Additionally, for all types of editors, including the classic and decoupled ones, you can also call:

editor.editing.view.change( writer => {
    writer.setAttribute( 'spellcheck', 'false', editor.editing.view.document.getRoot() );
} );

N/A. CKEditor 5 always creates a new paragraph (<p> element) as specified by Editor Recommendations - Enter key.

Shift+Enter can be used for creating soft line breaks.

Classic editor (CKEditor 5) no longer encapsulates the editing area in an <iframe>, which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the height setting can be achieved with .ck-editor__editable_inline { height:400px; }.

In order to set the height dynamically (from JavaScript) use the view writer:

editor.editing.view.change( writer => {
    writer.setStyle( 'height', '400px', editor.editing.view.document.getRoot() );
} );

See also How to set the height of CKEditor 5 (Classic editor).

Keystroke handlers can be registered using EditingKeystrokeHandler. More information and examples can be found in a dedicated Keystrokes and focus management section.

Making keystrokes overridable through config.keystrokes is handled in a dedicated issue. There is also an issue about improving keystroke handling.

Using the configuration file or setting to define event listeners was a bad practice so support for it was dropped.

When creating an editor, a Promise is returned. Use then/catch() to define a callback when the editor is initialized or fails to start. The promise returns the created editor instance, e.g. ClassicEditor, on which you can listen to its events.

Note: The editor instance is not the only object on which events are fired. You can also listen to e.g. Document events.

N/A.

The decoupled editor allows configuring where should the toolbar and the editable element be inserted.

In addition to that, CKEditor 5 Framework architecture allows for writing a custom editor that contains multiple editable elements (document roots). See the multi-root editor example.

N/A. CKEditor 5 always creates a new paragraph (<p> element) as specified by Editor Recommendations - Enter key.

Shift+Enter can be used for creating soft line breaks.

In CKEditor 5 lots of changes to the interface can be easily made by changing the default CKEditor theme. See the Theme customization guide.

For heavy UI modifications, like integrating CKEditor with a custom UI framework, building a custom editor is needed. See the Third-party UI guide.

See config.toolbar. Refer to the toolbar guide to learn more about managing toolbar in CKEditor 5.

See also config.balloonToolbar to define the toolbar of a balloon editor and the block toolbar feature.

There are several image upload strategies supported by CKEditor 5. Check out the comprehensive "Image upload" guide to learn more.

Classic editor (CKEditor 5) no longer encapsulates the editing area in an <iframe>, which means that the height (and similar options) of the editing area can be easily controlled with CSS. For instance, to set the width of any of the editor types, use .ck-editor__editable_inline { width:400px; }.

In order to set the width dynamically (from JavaScript) use the view writer:

editor.editing.view.change( writer => {
    writer.setStyle( 'width', '400px', editor.editing.view.document.getRoot() );
} );

See also How to set the height of CKEditor 5 (Classic editor).