javascript CKEditor 5 - 如何插入一些 HTML（也就是源模式在哪里）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47729450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CKEditor 5 - How to insert some HTML (aka. where's the source mode)?
提问by Marek Urbanowicz
I want to be able to switch from WYSIWYG to plain HTML to e.g. insert IFrame with a Youtube video. So far with the standard CKEditor 5 builds there is no documentation on how to do that.
我希望能够从 WYSIWYG 切换到纯 HTML，例如插入带有 Youtube 视频的 IFrame。到目前为止，标准的 CKEditor 5 版本没有关于如何做到这一点的文档。
Is there an equivalent of the Source Editing Areaplugin but for CKEditor 5?
除了 CKEditor 5 之外，是否有与Source Editing Area插件等效的插件？
回答by Reinmar
Your question touches two complicated topics:
你的问题涉及两个复杂的话题：
- Whether source mode makes any sense in general.
- Whether it is possible to allow inputting (and editing) any HTML to CKEditor 5.
- 源模式在一般情况下是否有意义。
- 是否可以允许将任何 HTML 输入（和编辑）到 CKEditor 5。
They've been already discussed in the "View Source" modeand "How to preserve markup and not have it removed"tickets on CKEditor 5's GitHub, but I'll try to quickly explain them here.
它们已经在 CKEditor 5 的 GitHub 上的“查看源代码”模式和“如何保留标记而不将其删除”票证中进行了讨论，但我将尝试在此处快速解释它们。
Does the source mode make sense?
源模式有意义吗？
Not really. It makes some sense for a small group of people who know HTML and who can reliably edit it manually, but then why using a rich-text editor at all?
并不真地。对于一小群了解 HTML 并且可以可靠地手动编辑它的人来说，这是有道理的，但是为什么要使用富文本编辑器呢？
You can say though, that it's not a problem? Only power users will edit HTML. The rest will use the WYSIWYG mode. But here another set of problems appear. You just inserted arbitrary HTML into the editor and now other users try to edit it in the WYSIWYG mode. But since this is an HTML which the editor doesn't understand (because there are no features which handle it) there's a huge chance that it's going to be destroyed with time. That those blobs of HTML will be split, bolded, wrapped, incorrectly copied and pasted, etc. You can say that the source mode proves to be useful once again because due to lack of a proper UI to edit that blob you'll need to manually fix it. But wait – wasn't all this mess why people hate rich-text editors?
你可以说，这不是问题吗？只有高级用户才能编辑 HTML。其余的将使用 WYSIWYG 模式。但是这里出现了另一组问题。您刚刚在编辑器中插入了任意 HTML，现在其他用户尝试在 WYSIWYG 模式下编辑它。但由于这是一个编辑器无法理解的 HTML（因为没有处理它的功能），它很有可能随着时间的推移而被破坏。那些 HTML 的 blob 将被拆分、加粗、包装、错误地复制和粘贴等。您可以说源模式再次证明是有用的，因为由于缺乏适当的 UI 来编辑该 blob，您需要手动修复它。但是等等——这不正是人们讨厌富文本编辑器的原因吗？
Let's look at this through an analogy. A rich-text editor is just an interface to edit some data (in HTML format in this case). Similarly, a CMS is an interface to edit a database. So do you give a direct access to your database to normnal users? Do you add products to your database manually via mysqladamin? I don't think so. It's neither convenient nor safe nor understandable for normal users.
让我们通过一个类比来看待这一点。富文本编辑器只是用于编辑某些数据（在本例中为 HTML 格式）的界面。同样，CMS 是编辑数据库的界面。那么您是否允许普通用户直接访问您的数据库？您是否通过手动将产品添加到您的数据库中mysqladamin？我不这么认为。对于普通用户来说，既不方便也不安全，也不可理解。
So don't try to edit HTML manually. If your CMS misses a feature, you just add a feature. Do the same with rich-text editors. And don't blame them for ruining your hand-crafted HTML if you haven't teached them what this HTML means and how to treat it.
所以不要尝试手动编辑 HTML。如果您的 CMS 遗漏了一个功能，您只需添加一个功能。对富文本编辑器执行相同操作。如果您没有教过他们这个 HTML 的含义以及如何处理它，请不要责怪他们破坏了您手工制作的 HTML。
I really encourage you to read "View Source" modebecause we've touched there many interesting topics (e.g. what a structured content is).
我真的鼓励您阅读“查看源代码”模式，因为我们已经触及了许多有趣的主题（例如结构化内容是什么）。
Is it possible to input any HTML to CKEditor 5?
是否可以向 CKEditor 5 输入任何 HTML？
No. I'll quote myself here:
不，我会在这里引用自己的话：
CKEditor 5 implements a custom data model. In order to load data to this model you need to have view -> model converters for each piece of the content that you want your editor to support. Then, you need model -> view converters in order to make this content editable (it needs to be rendered in the editor for editing). Finally, you need to configure the schema and sometimes customize certain features like Enter so they know the meaning of this content that you loaded into the editor and how to modify it.
In other words, because of the data model a feature needs to implement the full life-cycle of a specific piece of content (tag, attribute, etc.) which it handles – from data loading, through rendering for editing, editing itself and data retrieval.
CKEditor 5 实现了自定义数据模型。为了将数据加载到此模型，您需要为您希望编辑器支持的每条内容拥有视图 -> 模型转换器。然后，您需要模型 -> 视图转换器以使此内容可编辑（需要在编辑器中呈现以进行编辑）。最后，您需要配置架构，有时还需要自定义某些功能，例如 Enter，以便他们了解您加载到编辑器中的内容的含义以及如何修改它。
换句话说，由于数据模型，一个功能需要实现它处理的特定内容（标签、属性等）的完整生命周期——从数据加载，到渲染以进行编辑、编辑自身和数据恢复。
Source: https://github.com/ckeditor/ckeditor5/issues/705
来源：https: //github.com/ckeditor/ckeditor5/issues/705
New era
新时代
The times have changed. For years we tried to educate developers how rich-text editors should be used but the dark age of WYSIWYGs being used to edit entire websites stayed strong among in people minds.
时代变了。多年来，我们试图教育开发人员应该如何使用富文本编辑器，但使用所见即所得来编辑整个网站的黑暗时代在人们心中仍然很强烈。
With CKEditor 5 there's no more an option to edit arbitrary HTML due to the data model and the overal architecture which forces developers to rethink their integrations. At the same time, the existence of the data model and a completely new architecture make it so much easier to implement editing features that this job will finally be really approachable. It won't come free, for sure, but the final effect will be much better too.
使用 CKEditor 5，由于数据模型和整体架构迫使开发人员重新考虑他们的集成，因此不再有编辑任意 HTML 的选项。同时，数据模型的存在和全新的架构使得实现编辑功能变得如此容易，以至于这项工作最终将变得非常平易近人。它肯定不会免费，但最终效果也会好得多。
回答by Roger
Yes, it's possible to insert html into CKEditor5:
是的，可以将 html 插入到 CKEditor5 中：
insertHTML(html:string) {
// See: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#where-are-the-editorinserthtml-and-editorinserttext-methods-how-to-insert-some-content
const viewFragment = this.editor.data.processor.toView( html );
const modelFragment = this.editor.data.toModel( viewFragment );
this.editor.model.insertContent(modelFragment);
}
