Javascript CKEditor 5-如何插入一些HTML（又称为源代码模式）？

我希望能够从WYSIWYG切换到普通HTML，例如插入IFrame Youtube视频。到目前为止，对于标准的CKEditor 5版本，还没有关于如何做到这一点的文档

---

除了CKEditor 5之外，是否还有其他插件？

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

• 一般来说，源模式是否有意义
• 是否允许向CKEditor 5输入（和编辑）任何HTML

它们已经在CKEditor 5的GitHub上的和票证中讨论过了，但我将尝试在这里快速解释它们

源模式有意义吗？ 不是真的。对于一小部分了解HTML并且能够可靠地手动编辑它的人来说，这是有意义的，但是为什么要使用富文本编辑器呢

你可以说这不是问题吗？只有超级用户才能编辑HTML。其余将使用所见即所得模式。但这里又出现了一系列问题。您刚刚在编辑器中插入了任意HTML，现在其他用户尝试在WYSIWYG模式下对其进行编辑。但由于这是一个编辑器不理解的HTML（因为没有处理它的特性），它很有可能会随着时间的推移而被破坏。这些HTML blob将被拆分、粗体、包装、错误复制和粘贴，等等。您可以说源模式再次证明是有用的，因为由于缺少适当的UI来编辑该blob，您需要手动修复它。但是等等——难道这一切都是人们讨厌富文本编辑器的原因吗

让我们通过一个类比来看待这个问题。富文本编辑器只是编辑某些数据的界面（在本例中为HTML格式）。同样，CMS是编辑数据库的接口。那么，您是否允许普通用户直接访问您的数据库？您是否通过

mysqladamin

手动将产品添加到数据库中？我不这么认为。对于普通用户来说，这既不方便也不安全，也不容易理解

所以不要试图手动编辑HTML。如果您的CMS缺少一个功能，您只需添加一个功能。对富文本编辑器执行相同的操作。如果你没有教他们这个HTML是什么意思以及如何处理它，不要责怪他们破坏了你手工制作的HTML

我真的鼓励你阅读，因为我们已经触及了许多有趣的话题（例如，什么是结构化内容）

是否可以将任何HTML输入到CKEditor 5？ 不，我在这里引用我自己的话：

CKEditor 5实现了一个自定义数据模型。为了将数据加载到此模型，您需要为希望编辑器支持的每一部分内容提供视图->模型转换器。然后，您需要模型->视图转换器以使此内容可编辑（需要在编辑器中呈现以进行编辑）。最后，您需要配置模式，有时还需要自定义某些功能（如Enter），以便它们知道您加载到编辑器中的内容的含义以及如何修改它

换句话说，由于数据模型，功能需要实现其处理的特定内容（标记、属性等）的整个生命周期——从数据加载到编辑呈现、编辑本身和数据检索

资料来源：

新时代 时代变了。多年来，我们一直试图教育开发人员如何使用富文本编辑器，但所见即所得（WYSIWYGs）被用来编辑整个网站的黑暗时代在人们的脑海中依然根深蒂固

---

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

是的，可以将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);
  }  

---

对于CKEditor 5开发人员和使用所见即所得编辑器的人来说，这个问题是可以理解的。请不要关闭它（我看到了反对票）。对于Ckeditor，最初这是有充分记录的。试试这个：特别是

部分，您可以使用以下代码片段检索编辑器中可用的所有工具栏项：Array.from（editor.ui.componentFactory.names）不工作。它提供了配置的元素数组…我知道这是一个旧线程，但我只想提到这个编辑器：，因为我们想在我们的商店解决方案中使用CKEditor5，但我们需要一个HTML功能。感谢您提供的信息。我有点难过他们决定走这条路。我希望他们会继续维护版本4，因为这会阻止许多项目升级。有时候，客户需要的功能毫无意义，开发人员仍然需要提供。谢谢，但这是一个古老的事实。。。3年前，有一个更新：您现在可以在Chkeditor5中插入一些html！我认为以上是一个很糟糕的借口，当然我们需要能够编辑html。这是“最佳”和更新的答案，我建议你用香草javascript/Jquery给出答案，感谢你提供文档链接。