Contribute to this guide

指南CKEditor 4 配置选项兼容性

下表列出了 CKEditor 4 配置选项,以及在 CKEditor 5 中的等效选项(如果有)。

注意:在 CKEditor 5 中,选项数量有意减少。由于 CKEditor 4 中可用的配置选项数量众多(约 300 个),配置它变得非常麻烦。这就是我们在从头开始设计 CKEditor 5 时,决定基于 编辑器推荐 项目的结果,创建一个简化的编辑器,并基于经过深思熟虑的默认行为。

CKEditor 4 CKEditor 5

allowedContent

您可以通过 GHS(通用 HTML 支持)功能 扩展 CKEditor 5 应支持的 HTML 标签或属性列表。GHS 允许将官方 CKEditor 5 功能尚未涵盖的 HTML 标记添加到编辑器的内容中。此类元素可以加载、粘贴或输出。但是,它不会为扩展的 HTML 标记提供专门的 UI。

您可以通过编写插件来获得完整的 HTML 支持,该插件(理想情况下)还提供控制(插入、编辑、删除)此类标记的方法。有关如何创建插件的更多信息,请查看 创建基本插件 文章。查看 CKEditor 5 插件的源代码也会为您提供很多灵感。

CKEditor 5 将仅保留由编辑器插件显式地在模型和视图之间转换的内容。查看 转换文档 了解如何扩展转换规则。

applicationTitle N/A
autoEmbed_widget 请参阅 媒体嵌入 功能指南,了解有关在 CKEditor 5 中嵌入媒体的更多信息。

autoGrow_bottomSpace
autoGrow_maxHeight
autoGrow_minHeight
autoGrow_onStartup

这些设置不再需要,因为 CKEditor 5 默认情况下会自动随内容增长。

经典编辑器 在 CKEditor 5 中不再将编辑区域封装在 <iframe> 中。这意味着您可以使用 CSS 控制编辑区域的高度(以及类似选项)。例如,您可以使用以下代码设置 minHeightmaxHeight 选项

.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 始终更新替换的元素。此行为无法禁用。
autocomplete_commitKeystrokes N/A
autolink_commitKeystrokes
autolink_emailRegex
autolink_urlRegex
请参阅 自动链接部分,了解有关在 CKEditor 5 中支持自动链接的更多信息。
baseFloatZIndex N/A。有一个专门的 关于 z-index 管理的议题,以及将其对开发人员更加开放。
baseHref 尚未支持,请参阅 相关的 GitHub 议题
basicEntities N/A
blockedKeystrokes N/A

bodyClass

经典编辑器 在 CKEditor 5 中不再将编辑区域封装在 <iframe> 中,因此此设置不再需要。使用 <div class="..."> 包装编辑器以获得类似的效果。使用 气球气球块内联分离 编辑器时,可以将类添加到初始化编辑器的元素上。

此外,所有编辑器类型都在其主根可编辑元素上使用 .ck-content。因此,此类也可以用于编写编辑器内容的样式表规则。

bodyId

经典编辑器 在 CKEditor 5 中不再将编辑区域封装在 <iframe> 中,因此此设置不再需要。使用 <div id="..."> 包装编辑器以获得类似的效果。使用 气球气球块内联分离 编辑器时,可以将类添加到初始化编辑器的元素上。

此外,所有编辑器类型都在其主根可编辑元素上使用 .ck-content。因此,此类也可以用于编写编辑器内容的样式表规则。

browserContextMenuOnCtrl 不再需要,因为 CKEditor 5 没有上下文菜单,也不会阻止本机浏览器上下文菜单。
clipboard_defaultContentType
clipboard_handleImages
clipboard_notificationDuration
N/A
cloudServices_tokenUrl 请参阅 config.cloudServices.tokenUrl
cloudServices_uploadUrl 请参阅 config.cloudServices.uploadUrl。查看全面的 图像上传 指南,了解有关更多信息。

codeSnippetGeshi_url
codeSnippet_codeClass
codeSnippet_languages
codeSnippet_theme

请参阅 代码块 功能指南,了解有关在 CKEditor 5 中支持预格式化代码块的更多信息。

一个为内联 <code> 元素添加支持的插件包含在 基本样式 包中。

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

请参阅 字体系列、大小和颜色 功能指南,了解有关在 CKEditor 5 中配置字体和背景颜色的更多信息。

CKEditor 5 还提供了一个新的突出显示插件。它允许使用具有不同 CSS 类的 <mark> 元素突出显示文本的部分,这些 CSS 类可以进行样式化。有关更多信息,请参阅 突出显示 功能指南。

contentsCss 经典编辑器 在 CKEditor 5 中不再将编辑区域封装在 <iframe> 中,因此不再需要此类文件和配置设置。如果出于某种原因,您需要以不同的方式对编辑区域的内容进行样式化,请使用 .ck-content 选择器。
contentsLangDirection 请参阅 设置内容语言 指南,了解如何使用 config.language 配置选项设置内容方向。
contentsLanguage 请参阅 设置内容语言 指南,了解如何使用 config.language 配置选项设置内容语言。
contextmenu_contentsCss 不再需要,因为 CKEditor 5 没有上下文菜单。
copyFormatting_allowRules
copyFormatting_allowedContexts
copyFormatting_disallowRules
copyFormatting_keystrokeCopy
copyFormatting_keystrokePaste
copyFormatting_outerCursor
请参阅 格式刷 指南,了解有关 CKEditor 5 中的复制格式功能的工作原理。
coreStyles_bold CKEditor 5 使用 <strong> 元素,请参阅 编辑器推荐 - 粗体
coreStyles_italic CKEditor 5 使用 <i> 元素,请参阅 编辑器推荐 - 斜体

coreStyles_strike

CKEditor 5 使用 <s> 元素,请参阅 编辑器推荐 - 删除线

coreStyles_subscript

CKEditor 5 使用 <sub> 元素。

coreStyles_superscript

CKEditor 5 使用 <sup> 元素。

coreStyles_toggleSubSup

在 CKEditor 5 中,可以对同一个元素应用下标和上标。

coreStyles_underline

CKEditor 5 使用 <u> 元素,请参阅 编辑器推荐 - 下划线

customConfig 出于性能原因,CKEditor 5 不再加载单独的配置文件。内联传递配置选项可以减少 HTTP 请求的数量。
dataIndentationChars N/A
defaultLanguage 对多语言翻译的支持由翻译服务处理。请参阅 UI 语言 功能指南。
delayIfDetached
delayIfDetached_callback
delayIfDetached_interval
N/A
devtools_styles
devtools_textCallback
旧的 CKEditor 4 开发人员工具插件在 CKEditor 5 中不可用。但是,请查看新的 CKEditor 5 检查器。它是一个更加先进的工具,可以为您提供有关编辑器状态的大量有用信息,例如内部数据结构、选择、命令等等。
dialog_backgroundCoverColor
dialog_backgroundCoverOpacity
使用配置选项对编辑器的选定部分进行样式化已被更强大的 主题自定义 所取代。
dialog_buttonsOrder
dialog_magnetDistance
dialog_noConfirmCancel
dialog_startupFocusTab
N/A

disableNativeSpellChecker

注意:CKEditor 5 的拼写和语法检查功能的官方集成由合作伙伴解决方案 WProofreader 提供。

禁用本机浏览器拼写检查器的专用配置选项不可用。但是,在内联、气球和气球块编辑器的情况下,可以通过直接在应启用 CKEditor 的元素上设置 spellcheck 属性来完成。

此外,对于所有类型的编辑器(包括经典编辑器和分离编辑器),您还可以调用

editor.editing.view.change( writer => {
    writer.setAttribute( 'spellcheck', 'false', editor.editing.view.document.getRoot() );
} );
disableNativeTableHandles N/A
disableObjectResizing N/A
disableReadonlyStyling N/A
disallowedContent 请参阅 config.allowedContent。由于 CKEditor 5 会移除所有无法通过编辑器编辑的无关标记,因此该配置不再需要。您可以通过为编辑器添加插件或通过 通用 HTML 支持功能 来控制此行为。
div_wrapTable N/A
docType N/A。CKEditor 5 不再将编辑区域封装在 <iframe> 中,因此编辑器使用与运行它的页面相同的 DOCTYPE。
easyimage_class
easyimage_defaultStyle
easyimage_styles
easyimage_toolbar
请参阅 Easy Image图片 功能指南,了解有关与图片相关的功能以及 Easy Image 在 CKEditor 5 中集成的更多信息。
editorplaceholder
editorplaceholder_delay
请参阅 编辑器占位符 功能指南,了解有关在 CKEditor 5 中配置此功能的更多信息。
emailProtection N/A
embed_provider 请参阅 媒体嵌入 功能指南,了解有关在 CKEditor 5 中嵌入媒体的更多信息。
emoji_emojiListUrl
emoji_followingSpace
emoji_minChars
您可以将表情符号作为 Unicode 内容粘贴到 CKEditor 5 中。您也可以使用操作系统的表情符号选择器插入表情符号字符。使用 Ctrl+Cmd+Space 键盘快捷键(macOS)或 Win+.(Windows)或设备触控键盘上的相关表情符号键打开选择器。您可以配置 自动文本转换功能 以使用简码提供表情符号。
enableContextMenu N/A。CKEditor 5 不附带上下文菜单。建议使用可配置的上下文内联工具栏,为 表格图片 等功能提供上下文操作。另请参阅 toolbar
enableTabKeyTools N/A

enterMode

N/A。CKEditor 5 始终根据 编辑器建议 - Enter 键 创建一个新的段落(<p> 元素)。

您可以使用 Shift+Enter 创建软换行。

entities
entities_additional
entities_greek
entities_latin
entities_processNumerical
N/A
exportPdf_fileName
exportPdf_options
exportPdf_service
exportPdf_stylesheets
exportPdf_tokenUrl
请参阅 导出为 PDF 功能 指南,了解有关在 CKEditor 5 中配置 HTML 到 PDF 转换器的更多信息。
extraAllowedContent 请参阅 config.allowedContent。您也可以通过 通用 HTML 支持功能 来实现此功能。
extraPlugins 了解如何在 CKEditor 5 中 安装插件
fileTools_defaultFileName
fileTools_requestHeaders
N/A
filebrowserBrowseUrl
filebrowserFlashBrowseUrl
filebrowserFlashUploadUrl
filebrowserImageBrowseLinkUrl
filebrowserImageBrowseUrl
filebrowserImageUploadUrl
filebrowserUploadMethod
filebrowserUploadUrl
filebrowserWindowFeatures
filebrowserWindowHeight
filebrowserWindowWidth
CKEditor 5 中尚无与文件浏览器插件等效的插件。另请参阅 config.uploadUrl
fillEmptyBlocks CKEditor 5 中的块始终被填充,因为这会保留内容作者(在输出数据中留下了这些空行)的意图。
find_highlight 请参阅 查找和替换 功能指南。
flashAddEmbedTag
flashConvertOnEdit
flashEmbedTagOnly
N/A
floatSpaceDockedOffsetX
floatSpaceDockedOffsetY
floatSpacePinnedOffsetX
floatSpacePinnedOffsetY
floatSpacePreferRight
N/A
fontSize_defaultLabel
fontSize_sizes
fontSize_style
font_defaultLabel
font_names
font_style
请参阅 字体系列、大小和颜色 功能指南,了解有关 CKEditor 5 中对字体大小、系列和颜色的支持的更多信息。
forceEnterMode N/A。另请参阅 config.enterMode
forcePasteAsPlainText N/A。由于 CKEditor 5 会移除所有无法通过启用的编辑器插件编辑的无关标记,因此该配置不再需要。
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
所有标题都可以通过 config.heading.options 配置。另请参阅 标题 功能指南。
format_tags 要在 CKEditor 5 中启用额外的块标签,您可以使用 通用 HTML 支持功能。或者,您必须提供一个专门的插件。另请参阅 config.allowedContent
fullPage 可通过 FullPage API 获得。
grayt_autoStartup CKEditor 5 的拼写和语法检查功能的官方集成由合作伙伴解决方案 WProofreader 提供。

height

CKEditor 5 中的 经典编辑器 不再将编辑区域封装在 <iframe> 中。这意味着您可以使用 CSS 控制编辑区域的高度(以及类似选项)。例如,您可以使用 .ck-editor__editable_inline { height:400px; } 设置高度。

要动态设置高度(从 JavaScript 中设置),请使用视图编写器

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

另请参阅 如何设置 CKEditor 5(经典编辑器)的高度

htmlEncodeOutput N/A。CKEditor 5 输出 HTML 标记。另请参阅 此 StackOverflow 问题专用问题
ignoreEmptyParagraph N/A
image2_alignClasses 可通过更强大的 config.image.styles 获得。这还允许使用自定义样式定义,而不仅仅是左、右和居中对齐。请参阅 图片样式 功能指南。
image2_altRequired
image2_captionedClass
image2_defaultLockRatio
image2_disableResizer
image2_maxSize
image2_prefillDimensions
请参阅 图片 功能指南,了解有关与图片相关的功能以及 CKEditor 5 中自定义选项的更多信息。
imageUploadUrl 请参阅 config.uploadUrl
image_prefillDimensions
image_previewText
image_removeLinkByEmptyURL
请参阅 图片 功能指南,了解有关与图片相关的功能以及 CKEditor 5 中自定义选项的更多信息。
indentClasses
indentOffset
indentUnit
请参阅 配置块缩进 功能指南,了解如何使用偏移量、单位或类来自定义缩进行为。
jqueryOverrideVal N/A
justifyClasses 请参阅 文本对齐 功能指南。
keystrokes 您可以使用 EditingKeystrokeHandler 注册按键处理程序。您可以在专门的 按键和焦点管理 部分找到更多信息和示例。
language
language_list
对许多翻译的支持由翻译服务处理。请参阅 UI 语言 功能指南。
linkDefaultProtocol config.link.defaultProtocol
linkJavaScriptLinksAllowed N/A
linkPhoneMsg
linkPhoneRegExp
N/A
linkShowAdvancedTab 请参阅 链接 功能指南,了解有关设置自定义链接属性的信息。
linkShowTargetTab 请参阅 config.link.addTargetToExternalLinks
magicline_color
magicline_everywhere
magicline_holdDistance
magicline_keystrokeNext
magicline_keystrokePrevious
magicline_tabuList
magicline_triggerOffset
此功能由 WidgetTypeAround 插件提供。它允许用户在小部件周围键入,而这些小部件通常由于 Web 浏览器的限制而无法放置光标。
mathJaxClass
mathJaxLib
N/A。CKEditor 5 的数学方程功能由合作伙伴解决方案 MathType 提供。
maximize_historyIntegration N/A
mentions 请参阅 提及 功能指南,了解有关基于 CKEditor 5 中用户输入的智能自动完成的更多信息。
menu_groups
menu_subMenuDelay
CKEditor 5 不附带上下文菜单。建议使用可配置的上下文内联工具栏,为 表格图片 等功能提供上下文操作。另请参阅 toolbar
newpage_html N/A
notification_duration N/A
observableParent N/A

on

使用配置文件或设置来定义事件监听器是一种不好的做法,因此对此的支持已删除。

创建编辑器时,会返回一个 Promise。使用 then/catch() 来定义编辑器初始化或启动失败时的回调。该 promise 会返回创建的编辑器实例(例如 ClassicEditor),您可以在其上监听其事件。

注意:编辑器实例不是唯一触发事件的对象。您还可以监听,例如 Document 事件。

pasteFilter 不需要,因为 CKEditor 5 始终会修剪粘贴的内容,以匹配可用插件可以处理的内容。如果您希望进一步过滤粘贴的内容,请 报告问题
pasteFromWordCleanupFile
pasteFromWordNumberedHeadingToList
pasteFromWordPromptCleanup
pasteFromWordRemoveStyles
pasteFromWord_heuristicsEdgeList
pasteFromWord_inlineImages
有关从 Microsoft Word 粘贴到 CKEditor 5 的支持详细信息,请参阅 从 Office 粘贴 功能指南。
pasteTools_keepZeroMargins 有关从外部应用程序粘贴到 CKEditor 5 的支持详细信息,请参阅 从 Office 粘贴从 Google Docs 粘贴 功能指南。
plugins 请参阅 plugins 配置选项。 CKEditor 5 中插件的启用方式总体上已发生变化。有关详细信息,请查看有关 插件自定义构建 的文章。
protectedSource N/A
readOnly 请参阅 editor.isReadOnly 并参考 只读 功能指南。
removeButtons N/A。您可以通过使用更少的按钮设置 toolbar 选项来实现类似的效果。
removeDialogTabs N/A
removeFormatAttributes
removeFormatTags
有关如何在 CKEditor 5 中删除使用内联 HTML 元素和 CSS 样式应用的任何文本格式的详细信息,请参阅 删除格式 功能指南。
removePlugins 请参阅 config.removePlugins
resize_dir
resize_enabled
resize_maxHeight
resize_maxWidth
resize_minHeight
resize_minWidth
不再需要。编辑器会自动随内容增长。您也可以使用 min-heightmax-height 来限制其高度,或者如果您需要,可以使用 height 来设置其高度。如果您希望允许用户手动调整编辑器的大小,则需要自己实现此行为。
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
CKEditor 5 的拼写和语法检查功能由合作伙伴解决方案 WProofreader 提供。

sharedSpaces

N/A。

分离式编辑器 允许配置插入工具栏和可编辑元素的位置。

除此之外,CKEditor 5 框架架构允许编写包含许多可编辑元素(文档根)的自定义编辑器。请参阅 多根编辑器示例

shiftEnterMode

N/A。CKEditor 5 始终根据 编辑器建议 - Enter 键 创建一个新的段落(<p> 元素)。

您可以使用 Shift+Enter 创建软换行。

shiftLineBreaks

N/A。CKEditor 5 始终将换行符 (<br> 元素) 移动到内联元素之外。

skin

在 CKEditor 5 中,您可以通过更改默认 CKEditor 主题来对界面进行大量更改。请参阅 主题自定义 指南。

对于重大的 UI 修改(例如将 CKEditor 集成到自定义 UI 框架中),您需要构建自定义编辑器。请参阅 第三方 UI 指南。

smiley_columns
smiley_descriptions
smiley_images
smiley_path
CKEditor 5 中没有专门的表情符号插件。但是,您可以将 表情符号 作为 Unicode 内容粘贴到富文本编辑器中。您还可以配置 自动文本转换功能 以使用简码提供 Unicode 表情符号。您也可以使用 特殊字符 功能输入表情符号。
sourceAreaTabSize N/A
specialChars 有关在 CKEditor 5 中插入特殊字符的支持详细信息,请参阅 特殊字符 功能指南。
startupFocus N/A
startupMode N/A
startupOutlineBlocks N/A
startupShowBorders N/A
stylesSet 有关将样式应用于编辑器内容的详细信息,请参阅 样式 功能指南。
stylesheetParser_skipSelectors
stylesheetParser_validSelectors
N/A
tabIndex N/A
tabletools_scopedHeaders N/A
tabSpaces N/A
templates
templates_files
templates_replaceContent
有关 CKEditor 5 中模板支持的详细信息,请参阅 模板 指南。
title N/A

toolbar

请参阅 config.toolbar。请参阅 工具栏 功能指南,了解有关在 CKEditor 5 中管理工具栏的详细信息。

另请参阅 config.balloonToolbar,以定义气泡编辑器的工具栏和 块工具栏 功能。

toolbarCanCollapse N/A。用户无法手动折叠工具栏。对于不分散注意力的编辑,工具栏在需要时出现,请使用 内联气泡气泡块 编辑器。
toolbarGroupCycling
toolbarGroups
N/A。可以使用 '|' 作为分隔符 对工具栏按钮进行分组,或者使用 '-' 分成几行。请参阅 工具栏 指南,了解有关在 CKEditor 5 中管理工具栏项目行为的详细信息。
toolbarLocation N/A。您可以通过使用 分离式编辑器 或编写具有自定义 UI 视图的编辑器来实现这一点,例如,在此 具有底部工具栏的编辑器 中。
toolbarStartupExpanded N/A
uiColor CKEditor 5 带有更强大的主题理念,您可以在其中为 UI 的几乎所有方面设置样式。请参阅 主题自定义 指南和 主题自定义示例。借助 CSS 变量,无需重建编辑器即可更改其样式。
undoStackSize 请参阅 config.typing.undoStep

uploadUrl

CKEditor 5 支持多种图像上传策略。查看 图像上传 指南以了解更多信息。

useComputedState N/A
widget_keystrokeInsertLineAfter
widget_keystrokeInsertLineBefore
在 CKEditor 5 中,您可以使用 Enter 在小部件之后直接插入新段落,使用 Shift + Enter 在小部件之前直接插入新段落。

width

CKEditor 5 中的 经典编辑器 不再将编辑区域封装在 <iframe> 中。这意味着您可以使用 CSS 控制编辑区域的宽度(以及类似选项)。例如,要设置任何编辑器类型的宽度,请使用 .ck-editor__editable_inline { width:400px; }

要动态地设置宽度(从 JavaScript 中设置),请使用视图编写器

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

另请参阅 如何设置 CKEditor 5(经典编辑器)的高度