CKEditor 4 configuration options compatibility

allowedContent

You can extend the list of HTML tags or attributes that CKEditor 5 should support via the GHS (General HTML Support) feature. The GHS allows adding HTML markup not yet 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.

You can get full-fledged HTML support 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 basic plugin article. Looking at the source code of CKEditor 5 plugins may also give you a lot of inspiration.

CKEditor 5 will only preserve content that is explicitly converted between the model and the view by the editor plugins. Check the conversion documentation to learn how to extend the conversion rules.

autoGrow_bottomSpace
autoGrow_maxHeight
autoGrow_minHeight
autoGrow_onStartup

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

Classic editor in CKEditor 5 no longer encapsulates the editing area in an <iframe>. This means that you can control the height (and similar options) of the editing area with CSS. For example, you can set the minHeight and maxHeight options 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;
}

bodyClass

Classic editor in CKEditor 5 no longer encapsulates the editing area in an <iframe>, so this setting is no longer needed. 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.

You can also declare the CSS classes in the configuration. Pass an element definition to the config.root.element option and list them in its classes field. This works in all editor types, including classic, where the definition describes the editable element that the editor creates inside its UI box. Refer to the Root types guide for an example.

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

bodyId

Classic editor in CKEditor 5 no longer encapsulates the editing area in an <iframe>, so this setting is no longer needed. 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.

You can also set an id in the configuration. Pass an element definition to the config.root.element option and declare it in the attributes field. This works in all editor types, including classic.

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

codeSnippetGeshi_url
codeSnippet_codeClass
codeSnippet_languages
codeSnippet_theme

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.

colorButton_backStyle
colorButton_colors
colorButton_colorsPerRow
colorButton_contentsCss
colorButton_enableAutomatic
colorButton_enableMore
colorButton_foreStyle
colorButton_historyRowLimit
colorButton_normalizeBackground
config.colorButton_renderContentColors

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

CKEditor 5 also provides a new highlight plugin. It allows for highlighting parts of the text with the <mark> element with different CSS classes that can be styled. See the Highlight feature guide for more information.

coreStyles_subscript

CKEditor 5 uses the <sub> element.

coreStyles_superscript

CKEditor 5 uses the <sup> element.

coreStyles_toggleSubSup

In CKEditor 5 it is possible to apply subscript and superscript to the same element.

coreStyles_underline

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

disableNativeSpellChecker

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() );
} );

enterMode

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

You can use Shift+Enter for creating soft line breaks.

If you used this option to build a single-line field, such as a document title or a label, set config.root.modelElement to '$inlineRoot'. Such a root accepts inline content only, so pressing Enter does not create a new block at all. This is not a general replacement for enterMode, which chose the block element to create rather than preventing blocks. Refer to the Root types guide for details.

height

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

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() );
} );

You can also set the height in the configuration. Pass an element definition to the config.root.element option and declare height, min-height, or max-height in its styles field. Refer to the Root types guide for an example.

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

on

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, for example, 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, for example, Document events.

sharedSpaces

N/A.

The decoupled editor allows configuring where to insert the toolbar and the editable element.

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

shiftEnterMode

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

You can use Shift+Enter for creating soft line breaks.

shiftLineBreaks

N/A. CKEditor 5 always moves line breaks (<br> elements) outside inline elements.

skin

In CKEditor 5 you can make lots of changes to the interface by changing the default CKEditor theme. See the Theme customization guide.

For heavy UI modifications, like integrating CKEditor with a custom UI framework, you need to build a custom editor. See the Third-party UI guide.

toolbar

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

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

uploadUrl

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

width

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

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() );
} );

You can also set the width in the configuration. Pass an element definition to the config.root.element option and declare width in its styles field.

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