javascript - 在 CKEditor 5 中呈现 HTML 页面

标签 javascript richtextbox rich-text-editor ckeditor4.x ckeditor5

问题陈述: 我最近从 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 中,我们无法找到与上述相同的配置。

enter image description here

最佳答案

由于 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

引用资料:

关于javascript - 在 CKEditor 5 中呈现 HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57494361/

相关文章:

JavaScript boolean 比较总是失败

c# - WPF RichTextBox - ScrollToEnd() 方法不会导致发生任何滚动

winforms - 获取 System.Windows.Forms.RichTextBox 的标准上下文菜单

css - 如何在 TinyMCE 编辑器中更改控制按钮的样式

ios - iOS 中的富文本编辑器

javascript - CSS <link/> 标签会在各种浏览器中阻止 HTML 解析吗

javascript - 当用户输入时如何获取 $viewValue 中的字符串?

javascript - 使用 jquery 将多个 list 项目添加或删除到另一个列表

html - 如何在 CKEditor 中将谷歌字体设置为默认字体?

wpf - RichTextBox - TextRanges 之间的换行符