Contribute to this guide

CKEditor 4 configuration options compatibility

The following table presents CKEditor 4 configuration options and, if available, their equivalent in CKEditor 5.

Note: In CKEditor 5, the number of options was reduced on purpose. Configuring CKEditor 4 was too troublesome due to the number of available configuration options (around 300). This is why when designing CKEditor 5 from scratch, we decided to come up with a simplified editor, with well-thought default behavior, based on the results of the Editor Recommendations project.

CKEditor 4 CKEditor 5

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.

applicationTitle N/A
autoEmbed_widget Refer to the Media embed feature guide to learn more about media embedding in CKEditor 5.

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;
}
            
autoUpdateElement CKEditor 5 always updates the replaced element. This behavior cannot be disabled.
autocomplete_commitKeystrokes N/A
autolink_commitKeystrokes
autolink_emailRegex
autolink_urlRegex
Refer to the Autolink section of the Link guide to learn more about support for automatic linking in CKEditor 5.
baseFloatZIndex N/A. There is a dedicated issue about z-index management and making it more open for developers.
baseHref Not supported yet, see the relevant GitHub issue.
basicEntities N/A
blockedKeystrokes N/A

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.

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.

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.

browserContextMenuOnCtrl No longer needed as CKEditor 5 does not have a context menu and does not block the native browser context menu.
clipboard_defaultContentType
clipboard_handleImages
clipboard_notificationDuration
N/A
cloudServices_tokenUrl See config.cloudServices.tokenUrl.
cloudServices_uploadUrl See config.cloudServices.uploadUrl. Check out the comprehensive Image upload guide to learn more.

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.

contentsCss Classic editor in CKEditor 5 no longer encapsulates the editing area in an <iframe>, so such file and configuration setting is no longer needed. If for some reason you need to style the contents of the editing area differently, use the .ck-content selector.
contentsLangDirection Refer to the Setting the language of the content guide to learn how to set the content direction using the config.language configuration option.
contentsLanguage Refer to the Setting the language of the content guide to learn how to set the content language using the config.language configuration option.
contextmenu_contentsCss No longer needed as CKEditor 5 does not have a context menu.
copyFormatting_allowRules
copyFormatting_allowedContexts
copyFormatting_disallowRules
copyFormatting_keystrokeCopy
copyFormatting_keystrokePaste
copyFormatting_outerCursor
Refer to the Format painter guide to learn how the copy formatting functionality works in CKEditor 5.
coreStyles_bold CKEditor 5 uses the <strong> element, see Editor Recommendations - Bold.
coreStyles_italic CKEditor 5 uses the <i> element, see Editor Recommendations - Italic.

coreStyles_strike

CKEditor 5 uses the <s> element, see Editor Recommendations - Strikethrough.

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.

customConfig For performance reasons, CKEditor 5 no longer loads a separate configuration file. Passing configuration options inline reduces the number of HTTP requests.
dataIndentationChars N/A
defaultLanguage The support for multiple translations is handled by the translations service. See the UI language feature guide.
delayIfDetached
delayIfDetached_callback
delayIfDetached_interval
N/A
devtools_styles
devtools_textCallback
The old CKEditor 4 Developer Tools plugin is not available for CKEditor 5. However, check out the new CKEditor 5 inspector. It is a far more advanced tool that will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
dialog_backgroundCoverColor
dialog_backgroundCoverOpacity
The use of configuration options to style selected parts of the editor was dropped in favor of much more powerful theme customization.
dialog_buttonsOrder
dialog_magnetDistance
dialog_noConfirmCancel
dialog_startupFocusTab
N/A

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() );
} );
disableNativeTableHandles N/A
disableObjectResizing N/A
disableReadonlyStyling N/A
disallowedContent See config.allowedContent. No longer needed as CKEditor 5 removes all unwanted markup that cannot be edited with the editor. You can control this by adding plugins to the editor or via the General HTML Support feature.
div_wrapTable N/A
docType N/A. CKEditor 5 no longer encapsulates the editing area in an <iframe>, so the editor is using the same DOCTYPE as the page where it operates.
easyimage_class
easyimage_defaultStyle
easyimage_styles
easyimage_toolbar
Refer to the Easy Image and Images feature guides to learn more about image-related features and Easy Image integration in CKEditor 5.
editorplaceholder
editorplaceholder_delay
Refer to the Editor placeholder feature guide to learn more about configuring this feature in CKEditor 5.
emailProtection N/A
embed_provider Refer to the Media embed feature guide to learn more about media embedding in CKEditor 5.
emoji_emojiListUrl
emoji_followingSpace
emoji_minChars
You can paste emoji into CKEditor 5 as Unicode content. You can also use the emoji picker of your operating system to insert emoji characters. Use the Ctrl+Cmd+Space keyboard shortcut (macOS) or Win+. (Windows) or the relevant emoji key on the touch keyboard of your device to open the picker. You can configure the automatic text transformation feature to deliver emojis with shortcodes, too.
enableContextMenu N/A. CKEditor 5 does not come with a context menu. A configurable contextual inline toolbar is preferred instead to offer contextual actions for features such as tables or images. See also toolbar.
enableTabKeyTools N/A

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.

entities
entities_additional
entities_greek
entities_latin
entities_processNumerical
N/A
exportPdf_fileName
exportPdf_options
exportPdf_service
exportPdf_stylesheets
exportPdf_tokenUrl
Refer to the Export to PDF feature guide to learn more about configuring the HTML to PDF converter in CKEditor 5.
extraAllowedContent See config.allowedContent. You can also achieve this via the General HTML Support feature.
extraPlugins Learn how to install plugins in CKEditor 5.
fileTools_defaultFileName
fileTools_requestHeaders
N/A
filebrowserBrowseUrl
filebrowserFlashBrowseUrl
filebrowserFlashUploadUrl
filebrowserImageBrowseLinkUrl
filebrowserImageBrowseUrl
filebrowserImageUploadUrl
filebrowserUploadMethod
filebrowserUploadUrl
filebrowserWindowFeatures
filebrowserWindowHeight
filebrowserWindowWidth
There is no equivalent of the file browser plugin in CKEditor 5 yet. See also config.uploadUrl.
fillEmptyBlocks Blocks are always filled in CKEditor 5 because this preserves the intention of the content author (who left such empty lines) in the output data.
find_highlight Refer to the Find and replace feature guide.
flashAddEmbedTag
flashConvertOnEdit
flashEmbedTagOnly
N/A
floatSpaceDockedOffsetX
floatSpaceDockedOffsetY
floatSpacePinnedOffsetX
floatSpacePinnedOffsetY
floatSpacePreferRight
N/A
fontSize_defaultLabel
fontSize_sizes
fontSize_style
font_defaultLabel
font_names
font_style
Refer to the Font family, size, and color feature guide to learn more about font size, family, and color support in CKEditor 5.
forceEnterMode N/A. Se also config.enterMode.
forcePasteAsPlainText N/A. No longer needed as CKEditor 5 removes all unwanted markup that cannot be edited with the enabled editor plugins.
forceSimpleAmpersand N/A
format_address
format_div
format_p
format_pre
N/A
format_h1
format_h2
format_h3
format_h4
format_h5
format_h6
All headings are configurable via config.heading.options. See also the Headings feature guide.
format_tags To enable additional block tags in CKEditor 5, you may use the General HTML Support feature. Alternatively, you must provide a dedicated plugin. See also config.allowedContent.
fullPage Available through the FullPage API.
grayt_autoStartup An official integration of the spell and grammar checking functionality for CKEditor 5 is provided by a partner solution, WProofreader.

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

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

htmlEncodeOutput N/A. CKEditor 5 outputs HTML markup. See also this StackOverflow question and a dedicated issue.
ignoreEmptyParagraph N/A
image2_alignClasses Available via more powerful config.image.styles. This also allows for using custom style definitions, not just left, right, and center alignment. See the Image styles feature guide.
image2_altRequired
image2_captionedClass
image2_defaultLockRatio
image2_disableResizer
image2_maxSize
image2_prefillDimensions
Refer to the Image feature guide to learn more about image-related features and customization options in CKEditor 5.
imageUploadUrl See config.uploadUrl.
image_prefillDimensions
image_previewText
image_removeLinkByEmptyURL
Refer to the Image feature guide to learn more about image-related features and customization options in CKEditor 5.
indentClasses
indentOffset
indentUnit
Refer to the Configuring the block indentation feature guide to learn how to customize the indentation behavior using offsets, units, or classes.
jqueryOverrideVal N/A
justifyClasses Refer to the Text alignment feature guide.
keystrokes You can register keystroke handlers using EditingKeystrokeHandler. You can find more information and examples in a dedicated Keystrokes and focus management section.
language
language_list
The support for many translations is handled by the translations service. See the UI language feature guide.
linkDefaultProtocol config.link.defaultProtocol
linkJavaScriptLinksAllowed N/A
linkPhoneMsg
linkPhoneRegExp
N/A
linkShowAdvancedTab Refer to the Link feature guide to read about setting custom link attributes.
linkShowTargetTab See config.link.addTargetToExternalLinks
magicline_color
magicline_everywhere
magicline_holdDistance
magicline_keystrokeNext
magicline_keystrokePrevious
magicline_tabuList
magicline_triggerOffset
This functionality is covered by the WidgetTypeAround plugin. It allows users to type around widgets where normally it is impossible to place the caret due to limitations of web browsers.
mathJaxClass
mathJaxLib
N/A. Math equation functionality for CKEditor 5 is provided by a partner solution, MathType.
maximize_historyIntegration N/A
mentions Refer to the Mentions feature guide to learn more about smart autocompletion based on user input in CKEditor 5.
menu_groups
menu_subMenuDelay
CKEditor 5 does not come with a context menu. A configurable contextual inline toolbar is preferred instead to offer contextual actions for features such as tables or images. See also toolbar.
newpage_html N/A
notification_duration N/A
observableParent N/A

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.

pasteFilter Not needed as CKEditor 5 always trims the pasted content to match what the available plugins can handle. If you would like to filter the pasted content even further, report a ticket.
pasteFromWordCleanupFile
pasteFromWordNumberedHeadingToList
pasteFromWordPromptCleanup
pasteFromWordRemoveStyles
pasteFromWord_heuristicsEdgeList
pasteFromWord_inlineImages
Refer to the Paste from Office feature guide to learn more about support for pasting from Microsoft Word in CKEditor 5.
pasteTools_keepZeroMargins Refer to the Paste from Office and Paste from Google Docs feature guides to learn more about support for pasting from external applications in CKEditor 5.
plugins See the plugins configuration option. The way how plugins are enabled in CKEditor 5 has changed in general. Check the articles about plugins and custom builds for more information.
protectedSource N/A
readOnly See editor.isReadOnly and refer to the Read-only feature guide.
removeButtons N/A. You can achieve a similar effect by setting the toolbar option with fewer buttons.
removeDialogTabs N/A
removeFormatAttributes
removeFormatTags
Refer to the Remove formatting feature guide to learn how to remove any text formatting applied with inline HTML elements and CSS styles in CKEditor 5.
removePlugins See config.removePlugins.
resize_dir
resize_enabled
resize_maxHeight
resize_maxWidth
resize_minHeight
resize_minWidth
No longer needed. The editor automatically grows with content. You can also limit its height with min-height and max-height or set it with height if you need. If you want to allow the users to manually resize the editor, you need to implement this behavior by yourself.
scayt_autoStartup
scayt_contextCommands
scayt_contextMenuItemsOrder
scayt_customDictionaryIds
scayt_customPunctuation
scayt_customerId
scayt_disableOptionsStorage
scayt_elementsToIgnore
scayt_handleCheckDirty
scayt_handleUndoRedo
scayt_ignoreAllCapsWords
scayt_ignoreDomainNames
scayt_ignoreWordsWithMixedCases
scayt_ignoreWordsWithNumbers
scayt_inlineModeImmediateMarkup
scayt_maxSuggestions
scayt_minWordLength
scayt_moreSuggestions
scayt_sLang
scayt_serviceHost
scayt_servicePath
scayt_servicePort
scayt_serviceProtocol
scayt_srcUrl
scayt_uiTabs
scayt_userDictionaryName
The spell and grammar checking functionality for CKEditor 5 is provided by a partner solution, WProofreader.

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.

smiley_columns
smiley_descriptions
smiley_images
smiley_path
There is no dedicated smiley plugin in CKEditor 5. However, you can paste the emoji into the rich-text editor as Unicode content. You can also configure the automatic text transformation feature to deliver Unicode emojis with shortcodes. You can use the special characters feature to input emojis as well.
sourceAreaTabSize N/A
specialChars Refer to the Special characters feature guide to learn more about support for inserting special characters in CKEditor 5.
startupFocus N/A
startupMode N/A
startupOutlineBlocks N/A
startupShowBorders N/A
stylesSet Refer to the Styles feature guide to learn more about applying styles to the editor content.
stylesheetParser_skipSelectors
stylesheetParser_validSelectors
N/A
tabIndex N/A
tabletools_scopedHeaders N/A
tabSpaces N/A
templates
templates_files
templates_replaceContent
Refer to the Templates guide to learn about support for templates in CKEditor 5.
title N/A

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.

toolbarCanCollapse N/A. The user cannot collapse the toolbar manually. For distraction-free editing with the toolbar appearing when you need it, use inline, balloon, or balloon block editor.
toolbarGroupCycling
toolbarGroups
N/A. The toolbar buttons can be grouped by using '|' as a separator or divided into lines by using '-'. Refer to the toolbar guide to learn more about managing toolbar items behavior in CKEditor 5.
toolbarLocation N/A. You can achieve this by using the decoupled editor or writing an editor with a customized UI view, like in this editor with bottom toolbar.
toolbarStartupExpanded N/A
uiColor CKEditor 5 comes with an idea of much more powerful themes, where you can style almost every aspect of the UI. See the Theme customization guide and Theme customization example. Thanks to CSS variables rebuilding the editor is not needed to change its styles.
undoStackSize See config.typing.undoStep.

uploadUrl

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

useComputedState N/A
widget_keystrokeInsertLineAfter
widget_keystrokeInsertLineBefore
In CKEditor 5 you can insert a new paragraph directly after a widget with Enter and directly before a widget – with Shift + Enter.

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

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