在CKEditor 5中呈现HTML页面

Question

问题陈述：我最近从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中，我们找不到与上面相同的配置。

Answer 1

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

\n\n

经过一些尝试但没有成功后，我深入研究了源代码存储库，并发现了该项目贡献者的这个问题评论：

\n\n

\n

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

\n

\n\n

此外，一个链接的问题解释了 v5 API 更改背后的原因：

\n\n

\n

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

\n\n

CKEditor 4 使用 DOM 作为模型。加载数据时，HTML 会被处理（读取 \xe2\x80\x93 进行过滤、规范化和转义），但无论如何它最终会出现在 DOM 中。

\n\n

CKEditor 5 有一个自定义数据模型。当您将 HTML 加载到编辑器中时，它会被解析，然后功能（之前在编辑器中初始化）尝试从此 HTML 中获取它们理解的片段。这称为“转换”。作为转换的结果，内容将被加载到自定义数据结构中。当需要将内容渲染回 DOM（用于编辑或数据检索）时，将执行相反的过程。

\n\n

这意味着，如果您没有处理特定 HTML 标记/属性/样式/其他内容的功能，那么编辑器将自动删除它。

\n

\n\n

有CKEditor 5插件支持HTML编辑吗？

\n\n

不，社区建议使用CKEditor 4。

\n\n

参考：

\n\n

\n
• 问题 #664 解释 v5 中的深入架构变化
\n
• 对问题 #592 的评论
\n

\n