javascript - 在 CKEditor 5 中呈现 HTML 页面

Question

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

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

*以下是在 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。请继续阅读以了解原因。

在一些没有成功的实验之后，我深入研究了源存储库并发现了这个 issue comment from a contributor to the project :

Hi, inserting arbitrary HTML is not possible in CKE5. This is for a few reasons.

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

So far I've been talking about CKEditor 4. How's CKEditor 5 different?

CKEditor 4 uses the DOM as a model. When loading data, the HTML is processed (read – filtered, normalized and escaped) but it ends up in the DOM anyway.

CKEditor 5 has a custom data model. When you load HTML into the editor, it's parsed and then features (initialized previously in the editor) try to pick up from this HTML the pieces they understand. This is called "conversion". As a result of a conversion, the content is being loaded into the custom data structure. The reverse process is executed when content needs to be rendered back to the DOM (either for editing or for data retrieval).

This means that if you don't have a feature which handles a certain HTML tag/attribute/style/whatever then the editor will automatically drop it.

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

没有，社区recommendation是使用CKEditor 4。

引用资料:

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