CKEditor 5-如何插入一些HTML（又称源代码模式）？ [英] CKEditor 5 - How to insert some HTML (aka. where's the source mode)?

问题描述

我希望能够从WYSIWYG切换到纯HTML，例如在iFrame中插入
的Youtube视频。到目前为止，对于标准CKEditor 5构建，尚没有有关如何执行此操作的文档。

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.

是否存在与源代码编辑区插件，但适用于CKEditor 5吗？

Is there an equivalent of the Source Editing Area plugin but for CKEditor 5?

推荐答案

您的问题涉及两个复杂的主题：

Your question touches two complicated topics:

• 从总体上讲源模式是否有意义。


• 是否可以允许将任何HTML输入（和编辑）到CKEditor 5。

它们已经在< a href = https://github.com/ckeditor/ckeditor5/issues/592 rel = noreferrer>查看源代码模式和如何保留标记而不将其删除 票证，位于CKEditor 5的GitHub上，但我将尝试在此处快速进行解释。

They've been already discussed in the "View Source" mode and "How to preserve markup and not have it removed" tickets on CKEditor 5's GitHub, but I'll try to quickly explain them here.

不是真的。对于一小部分了解HTML并可以可靠地手动对其进行编辑的人来说，这是有道理的，但是为什么要使用富文本编辑器呢？

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。其余的将使用所见即所得模式。但是这里出现了另一组问题。您只是将任意HTML插入编辑器，现在其他用户尝试以WYSIWYG模式进行编辑。但是由于这是编辑者无法理解的HTML（因为没有可处理的功能），因此很可能会随着时间的推移而销毁它。 HTML的这些blob将被分割，加粗，包装，错误地复制和粘贴等。您可以说源模式再次证明是有用的，因为由于缺少适当的UI来编辑该blob，您需要手动修复它。但是，等等–人们讨厌讨厌富文本格式的编辑者，这不是一团糟吗？

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?

让我们通过类比的眼光来看一下。 RTF编辑器只是用于编辑某些数据的界面（在这种情况下为HTML格式）。同样，CMS是用于编辑数据库的界面。那么，您是否将规范用户直接访问数据库？您是否通过 mysqladamin 将产品手动添加到数据库中？我不这么认为。对于普通用户而言，它既不方便也不安全也不易理解。

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缺少功能，则只需添加功能。使用富文本编辑器执行相同的操作。如果您没有教过他们这些HTML意味着什么以及如何对待它们，也不要怪他们破坏了您的手工HTML。

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.

我真的鼓励您阅读查看源代码模式，因为我们已经接触了很多有趣的话题（例如，

I really encourage you to read "View Source" mode because we've touched there many interesting topics (e.g. what a structured content is).

否。我在这里引用自己：

No. I'll quote myself here:

CKEditor 5实现了自定义数据模型。为了将数据加载到该模型，您需要为要让编辑器支持的每部分内容都具有view-> model converters。然后，您需要模型->视图转换器，以使该内容可编辑（需要在编辑器中进行渲染以进行编辑）。最后，您需要配置架构，有时还需要自定义某些功能（如Enter），以便它们知道您加载到编辑器中的该内容的含义以及如何对其进行修改。

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.

来源： https://github.com/ckeditor/ckeditor5/issues/705

时间已经改变。多年以来，我们一直试图教育开发人员如何使用富文本编辑器，但是人们习惯于使用用来编辑整个网站的所见即所得的黑暗时代。

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.

CKEditor 5由于数据模型和总体架构（迫使开发人员重新考虑其集成）而不再具有编辑任意HTML的选项。同时，数据模型的存在和全新的体系结构使实现编辑功能变得非常容易，以至于这项工作最终将变得真正容易实现。当然，它不会免费，但是最终效果也会更好。

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（又称源代码模式）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！