CKEditor 生态系统文档
Search
Contribute to this guide
主页/CKEditor 5/更新

指南更新至 CKEditor 5 v31.x

更新 CKEditor 5 安装时，确保所有包版本一致，以避免错误。

对于自定义版本，您可以尝试删除 package-lock.json 或 yarn.lock 文件（如果适用）并重新安装所有包，然后再重建编辑器。为了获得最佳效果，请确保使用最新版本的包。

# 更新至 CKEditor 5 v31.1.0

发布于 2021 年 12 月 7 日。

有关 31.1.0 版本中引入的全部变更列表，请参阅CKEditor 5 v31.1.0 的发行说明。

以下是升级到 CKEditor 5 v31.1.0 时需要您注意的最重要变更。

# 在编辑管道 中进行交互式内容过滤

# 交互式属性

从 v31.1.0 开始，编辑引擎将检测可能中断编辑体验的属性，并将它们重命名为 data-ck-unsafe-attribute-[原始属性名称]，例如

<!-- Before v31.1.0 -->
<p onclick="alert( 'Paragraph clicked!' )">Interactive paragraph</p>

<!-- After v31.1.0 -->
<p data-ck-unsafe-attribute-onclick="alert( 'Paragraph clicked!' )">Interactive paragraph</p>

这种新机制不会影响编辑器保存的数据（例如，editor.getData() 的输出）。过滤仅在用户与编辑器交互时在编辑期间应用。

如果您是生成这种类型内容的插件的作者编辑管道，并且您希望它被保留，您可以在使用DowncastWriter 创建元素时配置这一点模型-视图转换。诸如createContainerElement、createAttributeElement 或 createEmptyElement 之类的 method 接受一个选项，该选项将关闭特定属性的过滤

/* Before v31.1.0. */
const paragraph = writer.createContainerElement( 'p',
    {
        class: 'clickable-paragraph',
        onclick: 'alert( "Paragraph clicked!" )'
    }
);

/* After v31.1.0. */
const paragraph = writer.createContainerElement( 'p',
    {
        class: 'clickable-paragraph',
        onclick: 'alert( "Paragraph clicked!" )'
    },
    {
        // Make sure the "onclick" attribute will pass through.
        renderUnsafeAttributes: [ 'onclick' ]
    }
);

# 阻止脚本元素

同样从 v31.1.0 开始，任何进入编辑器编辑层的 <script> 元素（以及用户与之交互）都将被过滤掉（重命名为 <span data-ck-unsafe-element="script"></span>）。

此机制不会更改编辑器的输出。例如，editor.getData() 的结果将包含完整的 <script>...</script> 标签。无法选择退出它。

# table 和 tableCell 属性名称更改

table 元素属性的名称已更改。所有名称都添加了 table 前缀。

受影响的属性包括：borderStyle、borderColor、borderWidth、backgroundColor、alignment、width 和 height。

这些现在分别为：tableBorderStyle、tableBorderColor、tableBorderWidth、tableBackgroundColor、tableAlignment、tableWidth 和 tableHeight。

tableCell 元素属性的名称已更改。所有名称都添加了 tableCell 前缀。

受影响的属性包括：backgroundColor、padding、width、height、borderStyle、borderColor、borderWidth、verticalAlignment 和 horizontalAlignment。

这些已更改为 tableCellBackgroundColor、tableCellPadding、tableCellWidth、tableCellHeight、tableCellBorderStyle、tableCellBorderColor、tableCellBorderWidth、tableCellVerticalAlignment 和 tableCellHorizontalAlignment。

# 更新至 CKEditor 5 v31.0.0

发布于 2021 年 10 月 26 日。

有关 31.0.0 版本中引入的全部变更列表，请参阅CKEditor 5 v31.1.0 的发行说明。

以下是升级到 CKEditor 5 v31.0.0 时需要您注意的最重要变更。

# HTML 嵌入命令

从 v31.0.0 开始，'insertHtmlEmbed' 和 'updateHtmlEmbed' 命令不再可用。它们已被一个新的统一命令取代：'htmlEmbed'。

/* Before v31.0.0. */

// Inserts an empty HTML embed.
editor.execute( 'insertHtmlEmbed' );

// Updates the content of a selected HTML embed.
editor.execute( 'updateHtmlEmbed', '<p>HTML string</p>' );

/* After v31.0.0. */

// Inserts an empty HTML embed.
editor.execute( 'htmlEmbed' );

// Inserts an HTML embed with some initial content.
editor.execute( 'htmlEmbed', '<b>Initial content</b>.' );

// Updates the content of a selected HTML embed.
editor.execute( 'htmlEmbed', '<b>New content.</b>' );

InsertHtmlEmbedCommand 和 UpdateHtmlEmbedCommand 类也已删除。使用 HtmlEmbedCommand 类与 HTML 嵌入功能集成。