在 CKEditor 5 中渲染 HTML 页面

Posted 2023-02-16

【中文标题】在 CKEditor 5 中渲染 HTML 页面

【英文标题】：Rendering HTML page in CKEditor 5

【发布时间】：2019-12-20 23:47:29

【问题描述】：

问题陈述： 我最近从 CKEditor 4 更新到 CKEditor 5 并面临渲染 html 页面的问题。我发现当我向 CKEditor 5 提供 HTML 内容时，它会删除所有样式并呈现为纯 HTML。

我经历了一些不同的问题，我发现 CKEditor 5 实现了自定义数据模型。这意味着加载到编辑器中的每一条内容都需要转换为该模型，然后再渲染回视图。

*以下是在 ckeditor5 中重现问题的预览链接：*

CKEditor 4：https://codepen.io/bhuvavaibhav2rs/pen/rNBxbwG

CKEditor 5：https://codepen.io/bhuvavaibhav2rs/pen/yLBerKb

在 CKEditor 4 中，在进行以下配置后，它按预期工作：

CKEDITOR.replace('editor1', 
        fullPage: true,
        allowedContent: true
      );

在 CKEditor 5 中，我们无法找到与上述相同的配置。

【问题讨论】：

谢谢@Peter 的回答。能否请您指出任何为支持我的用例而开发的插件。

更新了答案。不幸的是，如果您想要使用 v4 描述的 HTML 编辑，您必须保留在 v4 上。在这个问题上你需要更多帮助吗？请让我知道或将我的答案标记为已接受。谢谢。

【参考方案1】：

由于 v5 中的架构更改，您无法像在 v4 中使用 CKEditor 5 那样编辑 HTML。请继续阅读以了解原因。

经过一些没有成功的实验，我挖掘了源代码库并遇到了这个issue comment from a contributor to the project：

您好，在 CKE5 中无法插入任意 HTML。这有几个原因。

此外，linked 问题解释了 v5 API 更改背后的原因：

到目前为止，我一直在谈论 CKEditor 4。CKEditor 5 有何不同？

CKEditor 4 使用 DOM 作为模型。加载数据时，HTML 是 已处理（读取 - 过滤、规范化和转义），但它最终在 无论如何，DOM。

CKEditor 5 有一个自定义数据模型。当您将 HTML 加载到 编辑器，它被解析然后特征（之前在 编辑器）尝试从这个 HTML 中提取他们理解的部分。这 称为“转换”。作为转换的结果，内容是 被加载到自定义数据结构中。逆过程是 当需要将内容呈现回 DOM 时执行（对于 编辑或数据检索）。

这意味着如果您没有处理某个特定问题的功能 HTML标签/属性/样式/无论然后编辑器将自动 放下它。

是否有支持 HTML 编辑的 CKEditor 5 插件？

不，社区recommendation 是使用CKEditor 4。

参考资料：

issue #664 explaining in-depth architectural changes in v5 comment on issue #592