CKEditor 5 中的插件

CKEditor 的功能是由插件引入的。事实上，如果没有插件，CKEditor 5 就只是一个空 API，毫无用处。CKEditor 核心团队提供的插件可以在 npm（以及 GitHub）上找到，以 npm 包的形式提供。一个包可能包含一个或多个插件（例如，@ckeditor/ckeditor5-image 包包含 多个细粒度插件）。

从 CKEditor 5 v42.0.0 开始，我们将所有插件收集到两个聚合包中：ckeditor5 和 ckeditor5-premium-features。使用这两个包是推荐的设置方式。这样，你可以轻松访问所有插件，而无需查找哪个插件位于哪个包中。

# 常见用例

插件可以是任何东西。它们是在编辑器配置加载时初始化的代码片段。它们可以使用 CKEditor 5 框架 API 的丰富功能来增强编辑器或更好地将其与你的应用程序集成。

插件的常见用例包括

• 编辑功能，如粗体、标题、链接或用户用来操作内容的任何其他功能。
• 添加语义值到内容中，例如注释或可访问性功能。
• 第三方服务集成，用于将外部资源（例如视频或社交网络帖子）注入内容。
• 处理图像上传和图像操作功能。
• 提供小部件，以便轻松与应用程序结构化数据集成。
• 注入分析工具，帮助提高内容质量。
• 以及其他无限的可能性。

# 创建插件

创建你自己的插件是一项简单的任务，但它需要你对 CKEditor 5 开发环境的某些方面有深入的了解。以下资源推荐作为起点

• 插件开发指南。
• 使用包生成器，它提供了一个插件开发环境。

在创建插件时，对 CKEditor 5 框架 的良好理解也是受欢迎的。

# 使用第三方插件

使用社区创建的插件是增强你的编辑器并添加更多功能的一种好方法。这些插件以 npm 包的形式提供，因此在 npm 中快速 “ckeditor5” 关键字搜索 可以作为起点。

一旦你有了要包含的插件，学习如何安装它们。

# 插件和 HTML 输出

以下列出了所有官方的 CKEditor 5 包以及一些合作伙伴包，以及它们可能的 HTML 输出。如果插件根据其配置生成不同的 HTML 输出，则在“HTML 输出”列中进行了描述。

应用于 HTML 元素的类、样式或属性都是可能的结果。但这并不意味着它们总是会被使用。

$block 是一个通用的结构元素，它可能包含文本内容。标题或段落等功能实现了它来继承共同的行为。你可以在 模式 指南中了解更多信息。

如果给定插件没有生成任何输出，则“HTML 输出”被描述为“无”。通配符 * 表示任何值都是可能的。

用于生成以下表格的数据来自包元数据。你可以在 包元数据 指南中了解更多信息。

ckeditor5-adapter-ckfinder

源文件：@ckeditor/ckeditor5-adapter-ckfinder/ckeditor5-metadata.json

插件	HTML 输出
CKFinder 上传适配器 功能指南 API 文档	无。

ckeditor5-ai

源文件：@ckeditor/ckeditor5-ai/ckeditor5-metadata.json

插件	HTML 输出
AI 助手 功能指南 API 文档	无。

ckeditor5-alignment

源文件：@ckeditor/ckeditor5-alignment/ckeditor5-metadata.json

插件	HTML 输出
对齐 功能指南 API 文档	<$block style="text-align:*"> 默认情况下，对齐功能使用 text-align 内联样式。
	<$block class="*"> 如果设置了 config.alignment.options，则这些类用于对齐，而不是内联样式。

ckeditor5-autoformat

源文件：@ckeditor/ckeditor5-autoformat/ckeditor5-metadata.json

插件	HTML 输出
自动格式化 功能指南 API 文档	无。

ckeditor5-autosave

源文件：@ckeditor/ckeditor5-autosave/ckeditor5-metadata.json

插件	HTML 输出
自动保存 功能指南 API 文档	无。

ckeditor5-basic-styles

源文件：@ckeditor/ckeditor5-basic-styles/ckeditor5-metadata.json

插件	HTML 输出
粗体 功能指南 API 文档	<strong>
代码 功能指南 API 文档	<code>
斜体 功能指南 API 文档	<i>
删除线 功能指南 API 文档	<s>
下标 功能指南 API 文档	<sub>
上标 功能指南 API 文档	<sup>
下划线 功能指南 API 文档	<u>

ckeditor5-block-quote

源文件：@ckeditor/ckeditor5-block-quote/ckeditor5-metadata.json

插件	HTML 输出
块引用 功能指南 API 文档	<blockquote>

ckeditor5-case-change

源文件：@ckeditor/ckeditor5-case-change/ckeditor5-metadata.json

插件	HTML 输出
大小写转换 功能指南 API 文档	无。

ckeditor5-ckbox

源文件：@ckeditor/ckeditor5-ckbox/ckeditor5-metadata.json

插件	HTML 输出
CKBox 功能指南 API 文档	<a data-ckbox-resource-id="*"><figure data-ckbox-resource-id="*"><img data-ckbox-resource-id="*"> 如果 config.ckbox.ignoreDataId 设置为 false（关闭），则会在插入的元素上添加资源 ID 作为 data-ckbox-resource-id 属性（默认情况下）。
CKBox 图像编辑 功能指南 API 文档	无。

ckeditor5-ckfinder

源文件：@ckeditor/ckeditor5-ckfinder/ckeditor5-metadata.json

插件	HTML 输出
CKFinder 功能指南 API 文档	无。

ckeditor5-cloud-services

源文件：@ckeditor/ckeditor5-cloud-services/ckeditor5-metadata.json

插件	HTML 输出
云服务 功能指南 API 文档	无。

ckeditor5-code-block

源文件：@ckeditor/ckeditor5-code-block/ckeditor5-metadata.json

插件	HTML 输出
代码块 功能指南 API 文档	<pre>
	<code class="language-*"> 默认情况下，代码块的语言用 language- 前缀的 CSS 类表示。
	<code class="*"> 可以通过 config.codeBlock.languages 数组自定义 CSS 类名。

ckeditor5-comments

源文件：@ckeditor/ckeditor5-comments/ckeditor5-metadata.json

插件	HTML 输出
评论 功能指南 API 文档	<comment id="*" type="*" >
	<comment-end name="*"><comment-start name="*">
	<* data-comment-end-after="*" data-comment-start-before="*" > 该插件将 data-comment-end-after 和 data-comment-start-before 属性添加到评论开始或结束的其他元素上。

ckeditor5-document-outline

源文件：@ckeditor/ckeditor5-document-outline/ckeditor5-metadata.json

插件	HTML 输出
文档大纲 功能指南 API 文档	无。
目录 功能指南 API 文档	<div class="table-of-contents table-of-contents_empty">
	<ol><li><a>
	<p class="table-of-contents__placeholder">

ckeditor5-easy-image

源文件：@ckeditor/ckeditor5-easy-image/ckeditor5-metadata.json

插件	HTML 输出
轻松图像 功能指南 API 文档	无。

ckeditor5-essentials

源文件：@ckeditor/ckeditor5-essentials/ckeditor5-metadata.json

插件	HTML 输出
基本功能 API 文档	<br>

ckeditor5-export-pdf

源文件：@ckeditor/ckeditor5-export-pdf/ckeditor5-metadata.json

插件	HTML 输出
导出为 PDF 功能指南 API 文档	无。

ckeditor5-export-word

源文件：@ckeditor/ckeditor5-export-word/ckeditor5-metadata.json

插件	HTML 输出
导出为 Word 功能指南 API 文档	无。

ckeditor5-find-and-replace

源文件：@ckeditor/ckeditor5-find-and-replace/ckeditor5-metadata.json

插件	HTML 输出
查找和替换 功能指南 API 文档	无。

ckeditor5-font

源文件：@ckeditor/ckeditor5-font/ckeditor5-metadata.json

插件	HTML 输出
字体背景颜色 功能指南 API 文档	<span style="background-color:*">
字体颜色 功能指南 API 文档	<span style="color:*">
字体大小 功能指南 API 文档	<span class="text-tiny text-small text-big text-huge"> 如果 config.fontSize.options 选项未设置或包含预定义的命名预设，则该功能使用类名。
	<span style="font-size:*"> 如果 config.fontSize.options 选项包含数值，则字体大小功能使用 font-size 内联样式。
	<* class="*" style="*:*" > 该插件可以配置为返回任何元素，以及任何类和任何内联样式。
字体系列 功能指南 API 文档	<span style="font-family:*"> 默认情况下，字体系列功能使用font-family内联样式。
	<* class="*" style="*:*" > 该插件可以配置为返回任何元素，以及任何类和任何内联样式。

ckeditor5-format-painter

源文件：@ckeditor/ckeditor5-format-painter/ckeditor5-metadata.json

插件	HTML 输出
格式刷 功能指南 API 文档	无。

ckeditor5-heading

源文件：@ckeditor/ckeditor5-heading/ckeditor5-metadata.json

插件	HTML 输出
标题 功能指南 API 文档	<h1>
标题 功能指南 API 文档	<h2><h3><h4> HTML 元素可能包含由其他插件创建的类、样式或属性，这些属性会更改<$block>元素。 此元素继承其他功能允许在<$block>元素上使用的所有属性、类和样式。
	<*> 可以配置插件以返回任何元素名称作为标题。

ckeditor5-highlight

源文件：@ckeditor/ckeditor5-highlight/ckeditor5-metadata.json

插件	HTML 输出
高亮 功能指南 API 文档	<mark class="marker-yellow marker-green marker-pink marker-blue pen-red pen-green"> 默认情况下，此插件预先配置了 4 个标记和 2 支笔。
	<mark class="*"> 可以配置插件以在<mark>元素上设置任何类。

ckeditor5-horizontal-line

源文件：@ckeditor/ckeditor5-horizontal-line/ckeditor5-metadata.json

插件	HTML 输出
水平线 功能指南 API 文档	<hr>

ckeditor5-html-embed

源文件：@ckeditor/ckeditor5-html-embed/ckeditor5-metadata.json

插件	HTML 输出
HTML 嵌入 功能指南 API 文档	<div class="raw-html-embed">
	<* class="*" style="*:*" > 插件可以输出用户提供的任何任意 HTML。 该 HTML 始终用<div class="raw-html-embed">元素包装。

ckeditor5-html-support

源文件：@ckeditor/ckeditor5-html-support/ckeditor5-metadata.json

插件	HTML 输出
通用 HTML 支持 功能指南 API 文档	<* class="*" style="*:*" *="*" > 插件可以输出由 config.htmlSupport 选项配置的任何任意 HTML。
数据过滤器 API 文档	<* class="*" style="*:*" *="*" > 插件可以输出任何任意 HTML，具体取决于其配置。
数据模式 API 文档	无。
HTML 注释 功能指南 API 文档	插件可以输出从编辑器初始数据或通过插件 API 添加的 HTML 注释。
完整页面 HTML 功能指南 API 文档	无。

ckeditor5-image

源文件：@ckeditor/ckeditor5-image/ckeditor5-metadata.json

插件	HTML 输出
自动图片 功能指南 API 文档	无。
块级图片 功能指南 API 文档	<figure class="image">
	<img alt="*" height="*" sizes="*" src="*" srcset="*" width="*" >
内联图片 功能指南 API 文档	<img alt="*" height="*" sizes="*" src="*" srcset="*" width="*" >
图片 功能指南 API 文档	无。
图片标题 功能指南 API 文档	<figcaption>
图片调整大小 功能指南 API 文档	<figure class="image_resized" style="height:*; width:*" >
	<img class="image_resized" style="aspect-ratio:*; height:*; width:*" >
图片样式 功能指南 API 文档	<figure class="image-style-side image-style-align-left image-style-align-right image-style-block-align-center image-style-block-align-left image-style-block-align-right">
	<figure class="*"> 可以配置插件以在<figure>元素上设置任何类名。
图片工具栏 功能指南 API 文档	无。
图片上传 功能指南 API 文档	无。
插入图片 功能指南 API 文档	无。
通过 URL 插入图片 功能指南 API 文档	无。

ckeditor5-import-word

源文件：@ckeditor/ckeditor5-import-word/ckeditor5-metadata.json

插件	HTML 输出
从 Word 导入 功能指南 API 文档	无。

ckeditor5-indent

源文件：@ckeditor/ckeditor5-indent/ckeditor5-metadata.json

插件	HTML 输出
缩进 功能指南 API 文档	无。
缩进块 功能指南 API 文档	<$block style="margin-left:*; margin-right:*"> 默认情况下，插件使用内联样式进行缩进。
	<$block class="*"> 如果在config.indentBlock.classes中定义了类，则使用它们而不是内联样式。

ckeditor5-language

源文件：@ckeditor/ckeditor5-language/ckeditor5-metadata.json

插件	HTML 输出
文本部分语言 功能指南 API 文档	<span dir="*" lang="*" >

ckeditor5-link

源文件：@ckeditor/ckeditor5-link/ckeditor5-metadata.json

插件	HTML 输出
自动链接 功能指南 API 文档	无。
链接 功能指南 API 文档	<a href="*">
	<a rel="*" target="*" > 如果启用了config.link.addTargetToExternalLinks，则外部链接将用rel和target属性装饰。
	<a class="*" style="*:*" *="*" > 可以通过自定义config.link.decorators配置，配置插件以在<a>标签上设置任何类、样式或属性。
链接图片 功能指南 API 文档	<a href="*">

ckeditor5-list

源文件：@ckeditor/ckeditor5-list/ckeditor5-metadata.json

插件	HTML 输出
传统列表 功能指南 API 文档	<ol><ul>
	<li> HTML 元素可能包含由其他插件创建的类、样式或属性，这些属性会更改<$block>元素。
传统待办事项列表 功能指南 API 文档	<ul class="todo-list">
	<li>
	<label class="todo-list__label">
	<span class="todo-list__label__description">
	<input checked="*" disabled="*" type="*" >
传统列表属性 功能指南 API 文档	<ol style="list-style-type:*" start="*" reversed="*" ><ul style="list-style-type:*" start="*" reversed="*" >
列表 功能指南 API 文档	<ol><ul>
	<li>
待办事项列表 功能指南 API 文档	<ul class="todo-list">
	<li>
	<label class="todo-list__label todo-list__label_without-description">
	<span class="todo-list__label__description">
	<input checked="*" disabled="*" type="*" >
列表属性 功能指南 API 文档	<ol style="list-style-type:*" start="*" reversed="*" type="*" ><ul style="list-style-type:*" start="*" reversed="*" type="*" >

ckeditor5-list-multi-level

源文件：@ckeditor/ckeditor5-list-multi-level/ckeditor5-metadata.json

插件	HTML 输出
多级列表 功能指南 API 文档	<ol class="multi-level-list legal-list" style="list-style-type:*" start="*" ><ul class="multi-level-list legal-list" style="list-style-type:*" start="*" >
	<li>
	<span class="multi-level-list__marker">

ckeditor5-markdown-gfm

源文件：@ckeditor/ckeditor5-markdown-gfm/ckeditor5-metadata.json

插件	HTML 输出
Markdown 功能指南 API 文档	无。

ckeditor5-media-embed

源文件：@ckeditor/ckeditor5-media-embed/ckeditor5-metadata.json

插件	HTML 输出
媒体嵌入 功能指南 API 文档	<figure class="media">
	<oembed url="*"> 如果config.mediaEmbed.previewsInData关闭，则不会显示媒体预览，并且媒体仅使用<oembed>标签表示（默认情况下）。
	<div data-oembed-url="*"> 如果config.mediaEmbed.previewsInData打开，则会在视图中显示媒体预览。
	<* url="*"> 如果config.mediaEmbed.previewsInData关闭，则可以配置插件以返回config.mediaEmbed.elementName指定的任何元素名称。
	<div style="height:*; padding-bottom:*; position:*"> 如果config.mediaEmbed.previewsInData打开，则会在视图中显示媒体预览。
	<iframe style="height:*; left:*; position:*; top:*; width:*" *allow*="*" frameborder="*" src="*" > 如果config.mediaEmbed.previewsInData打开，则会在视图中显示媒体预览。
	<* class="*" style="*:*" *="*" > 可以配置插件以返回具有任何类、内联样式和属性的任何元素，方法是通过config.mediaEmbed.providers为可预览的媒体。
媒体嵌入工具栏 功能指南 API 文档	无。

ckeditor5-mention

源文件：@ckeditor/ckeditor5-mention/ckeditor5-metadata.json

插件	HTML 输出
提及 功能指南 API 文档	<span class="mention" data-mention="*" >

ckeditor5-merge-fields

源文件：@ckeditor/ckeditor5-merge-fields/ckeditor5-metadata.json

插件	HTML 输出
合并字段 功能指南 API 文档	无。

ckeditor5-minimap

源文件：@ckeditor/ckeditor5-minimap/ckeditor5-metadata.json

插件	HTML 输出
内容小地图 功能指南 API 文档	无。

ckeditor5-page-break

源文件：@ckeditor/ckeditor5-page-break/ckeditor5-metadata.json

插件	HTML 输出
分页符 功能指南 API 文档	<div class="page-break" style="page-break-after:*" >
	<span style="display:*">

ckeditor5-pagination

源文件：@ckeditor/ckeditor5-pagination/ckeditor5-metadata.json

插件	HTML 输出
分页 功能指南 API 文档	<* style="page-break-before:*" data-pagination-page="*" > 当使用editor.getData( { pagination: true } )时。 否则，不会生成任何额外的元素。

ckeditor5-paragraph

源文件：@ckeditor/ckeditor5-paragraph/ckeditor5-metadata.json

插件	HTML 输出
段落 API 文档	<p> HTML 元素可能包含由其他插件创建的类、样式或属性，这些属性会更改<$block>元素。 此元素继承其他功能允许在<$block>元素上使用的所有属性、类和样式。

ckeditor5-paste-from-office

源文件：@ckeditor/ckeditor5-paste-from-office/ckeditor5-metadata.json

插件	HTML 输出
从 Office 粘贴 功能指南 API 文档	无。

ckeditor5-paste-from-office-enhanced

源文件：@ckeditor/ckeditor5-paste-from-office-enhanced/ckeditor5-metadata.json

插件	HTML 输出
增强版从 Office 粘贴 功能指南 API 文档	无。

ckeditor5-real-time-collaboration

源文件：@ckeditor/ckeditor5-real-time-collaboration/ckeditor5-metadata.json

插件	HTML 输出
在场人员列表 功能指南 API 文档	无。
实时协作评论 功能指南 API 文档	无。
实时协作编辑 功能指南 API 文档	无。
实时协作跟踪更改 功能指南 API 文档	无。
实时协作修订历史记录 功能指南 API 文档	无。

ckeditor5-remove-format

源文件：@ckeditor/ckeditor5-remove-format/ckeditor5-metadata.json

插件	HTML 输出
删除格式 功能指南 API 文档	无。

ckeditor5-restricted-editing

源文件：@ckeditor/ckeditor5-restricted-editing/ckeditor5-metadata.json

插件	HTML 输出
受限编辑模式 功能指南 API 文档	<span class="restricted-editing-exception">
标准编辑模式 功能指南 API 文档	<span class="restricted-editing-exception">

ckeditor5-revision-history

源文件：@ckeditor/ckeditor5-revision-history/ckeditor5-metadata.json

插件	HTML 输出
修订历史记录 功能指南 API 文档	无。

ckeditor5-select-all

源文件：@ckeditor/ckeditor5-select-all/ckeditor5-metadata.json

插件	HTML 输出
全选 功能指南 API 文档	无。

ckeditor5-show-blocks

源文件：@ckeditor/ckeditor5-show-blocks/ckeditor5-metadata.json

插件	HTML 输出
显示块 功能指南 API 文档	无。

ckeditor5-slash-command

源文件：@ckeditor/ckeditor5-slash-command/ckeditor5-metadata.json

插件	HTML 输出
斜杠命令 功能指南 API 文档	无。

ckeditor5-source-editing

源文件: @ckeditor/ckeditor5-source-editing/ckeditor5-metadata.json

插件	HTML 输出
源代码编辑 功能指南 API 文档	无。

ckeditor5-special-characters

源文件: @ckeditor/ckeditor5-special-characters/ckeditor5-metadata.json

插件	HTML 输出
特殊字符 功能指南 API 文档	无。
特殊字符 essentials 功能指南 API 文档	无。
特殊字符 arrows 功能指南 API 文档	无。
特殊字符 currency 功能指南 API 文档	无。
特殊字符 latin 功能指南 API 文档	无。
特殊字符 mathematical 功能指南 API 文档	无。
特殊字符 text 功能指南 API 文档	无。

ckeditor5-style

源文件: @ckeditor/ckeditor5-style/ckeditor5-metadata.json

插件	HTML 输出
样式 功能指南 API 文档	<* class="*"> 插件可以输出任何任意 HTML，具体取决于其配置。

ckeditor5-table

源文件: @ckeditor/ckeditor5-table/ckeditor5-metadata.json

插件	HTML 输出
表格 功能指南 API 文档	<figure class="table">
	<table><thead><tbody><tr>
	<td colspan="*" rowspan="*" ><th colspan="*" rowspan="*" >
表格单元格属性 功能指南 API 文档	<td style="background-color:*; border:*; border-*:*; height:*; padding:*; text-align:*; vertical-align:*; width:*"><th style="background-color:*; border:*; border-*:*; height:*; padding:*; text-align:*; vertical-align:*; width:*">
表格属性 功能指南 API 文档	<figure style="float:*; height:*; width:*">
	<table style="background-color:*; border:*; border-*:*">
表格工具栏 功能指南 API 文档	无。
表格标题 功能指南 API 文档	<figcaption data-placeholder="*">
表格列调整大小 功能指南 API 文档	<colgroup>
	<col style="width:*">

ckeditor5-template

源文件: @ckeditor/ckeditor5-template/ckeditor5-metadata.json

插件	HTML 输出
模板 功能指南 API 文档	无。

ckeditor5-track-changes

源文件: @ckeditor/ckeditor5-track-changes/ckeditor5-metadata.json

插件	HTML 输出
跟踪更改 功能指南 API 文档	无。
跟踪更改数据 功能指南 API 文档	无。

ckeditor5-typing

源文件: @ckeditor/ckeditor5-typing/ckeditor5-metadata.json

插件	HTML 输出
文本转换 功能指南 API 文档	无。

ckeditor5-ui

源文件: @ckeditor/ckeditor5-ui/ckeditor5-metadata.json

插件	HTML 输出
块工具栏 功能指南 API 文档	无。
无障碍帮助 功能指南 API 文档	无。

ckeditor5-undo

源文件: @ckeditor/ckeditor5-undo/ckeditor5-metadata.json

插件	HTML 输出
撤销 功能指南 API 文档	无。

ckeditor5-upload

源文件: @ckeditor/ckeditor5-upload/ckeditor5-metadata.json

插件	HTML 输出
Base64 上传适配器 功能指南 API 文档	无。
简单上传适配器 功能指南 API 文档	无。

ckeditor5-watchdog

源文件: @ckeditor/ckeditor5-watchdog/ckeditor5-metadata.json

插件	HTML 输出
看门狗 功能指南 API 文档	无。

ckeditor5-word-count

源文件: @ckeditor/ckeditor5-word-count/ckeditor5-metadata.json

插件	HTML 输出
字数统计 功能指南 API 文档	无。

mathtype-ckeditor5

源文件: 尚未发布

插件	HTML 输出
MathType 功能指南	<* *="*"> 有关可用的 MathML 元素和属性名称的完整列表，请访问 MDN Web 文档的 MathML。

wproofreader-ckeditor5

源文件: 尚未发布

插件	HTML 输出
WProofreader 功能指南	无。