CKEditor 5 - 如何插入一些 HTML（又名源模式在哪里）？
Posted
技术标签:
【中文标题】CKEditor 5 - 如何插入一些 HTML（又名源模式在哪里）？【英文标题】：CKEditor 5 - How to insert some HTML (aka. where's the source mode)? 【发布时间】：2018-05-23 14:10:03 【问题描述】：我希望能够从 WYSIWYG 切换到纯 html，例如插入 IFrame 一个 Youtube 视频。到目前为止，对于标准 CKEditor 5 构建，还没有关于如何执行此操作的文档。
除了 CKEditor 5 之外，是否有与 Source Editing Area 插件等效的插件？
【问题讨论】：
这个问题很好，对于 CKEditor 5 开发人员和使用所见即所得编辑器的人来说当然是可以理解的。请不要关闭它（我看到了反对票）。 最初使用 Ckeditor，这是有据可查的。试试这个：docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/… 特别是部分You can use the following snippet to retrieve all toolbar items available in your editor: Array.from( editor.ui.componentFactory.names );
不工作。它给出了配置的元素数组...
我知道这是一个旧线程，但我只想提一下这个编辑器：github.com/xdan/jodit，因为我们想在我们的商店解决方案中使用 CKEditor5，但我们需要一个 HTML 功能。
【参考方案1】：
您的问题涉及两个复杂的主题：
来源模式总体上是否有意义。 是否可以允许向 CKEditor 5 输入（和编辑）任何 HTML。他们已经在 CKEditor 5 的 GitHub 上的 "View Source" mode 和 "How to preserve markup and not have it removed" 门票中进行了讨论，但我会尝试在这里快速解释一下。
源模式有意义吗？
不是真的。对于一小群了解 HTML 并且可以可靠地手动编辑它的人来说，这很有意义，但是为什么要使用富文本编辑器呢？
您可以说，这不是问题吗？只有高级用户才能编辑 HTML。其余的将使用所见即所得模式。但这里出现了另一组问题。您刚刚将任意 HTML 插入到编辑器中，现在其他用户尝试在所见即所得模式下对其进行编辑。但由于这是一个编辑器不理解的 HTML（因为没有处理它的功能），它很有可能会随着时间的推移而被破坏。这些 HTML blob 将被拆分、加粗、包装、错误复制和粘贴等。您可以说源模式再次证明是有用的，因为由于缺少适当的 UI 来编辑该 blob，您需要手动修复它。但是等等——这不就是人们讨厌富文本编辑器的原因吗？
让我们通过一个类比来看看这个。富文本编辑器只是编辑某些数据的界面（在本例中为 HTML 格式）。同样，CMS 是编辑数据库的界面。那么，您是否允许普通用户直接访问您的数据库？您是否通过mysqladamin 手动将产品添加到数据库中？我不这么认为。对于普通用户来说，既不方便也不安全，也无法理解。
所以不要尝试手动编辑 HTML。如果您的 CMS 缺少某个功能，您只需添加一个功能。对富文本编辑器执行相同操作。如果你没有教他们这个 HTML 的含义以及如何处理它，也不要责怪他们破坏了你手工制作的 HTML。
我真的鼓励您阅读"View Source" mode，因为我们已经触及了许多有趣的主题（例如结构化内容是什么）。
CKEditor 5 可以输入任何 HTML 吗？
没有。我会在这里引用自己的话：
CKEditor 5 实现了自定义数据模型。为了将数据加载到此模型，您需要为您希望编辑器支持的每条内容提供视图 -> 模型转换器。然后，您需要模型 -> 视图转换器才能使此内容可编辑（需要在编辑器中呈现以进行编辑）。最后，您需要配置架构，有时还需要自定义某些功能，例如 Enter，以便他们知道您加载到编辑器中的内容的含义以及如何修改它。
换句话说，由于数据模型，功能需要实现它处理的特定内容（标签、属性等）的完整生命周期——从数据加载到渲染以进行编辑、编辑本身和数据检索。
来源：https://github.com/ckeditor/ckeditor5/issues/705
新时代
时代变了。多年来，我们一直试图教育开发人员应该如何使用富文本编辑器，但使用所见即所得来编辑整个网站的黑暗时代在人们的脑海中仍然很强烈。
使用 CKEditor 5，由于数据模型和整体架构迫使开发人员重新考虑他们的集成，因此不再有编辑任意 HTML 的选项。同时，数据模型的存在和全新的架构使得实现编辑功能变得非常容易，以至于这项工作最终将变得非常容易上手。肯定不会免费，但最终效果也会好很多。
【讨论】：
感谢您的信息。我有点难过他们决定走这条路。我希望他们将继续维护第 4 版，因为这使许多项目无法升级。有时，客户需要一些没有意义的功能，而现场的开发人员仍然必须交付。 谢谢，但这是一个古老的事实...... 3年前，有一个更新：ckeditor.com/docs/ckeditor5/latest/builds/guides/…您现在可以在 CkEditor5 中插入一些 html！ 我认为上面的借口太糟糕了，我们当然需要能够编辑html。【参考方案2】：是的，可以将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);
【讨论】：
这是“最佳”和更新的答案，我建议您在 vanilla javascript/Jquery 中给出答案，感谢您提供文档链接。【参考方案3】：似乎editor.getData() 和editor.setData() 可以与textarea 元素一起被破解以产生穷人的“源代码编辑器”。我可以看到这个示例被修饰了类似 codemirror 的东西以产生可用的东西。
如果 CKEditor 团队不想要这种机制 INSIDE ckeditor，那很好，但要直截了当地说 HTML 编辑是错误的，或者从黑暗时代开始，恕我直言，这是非常封闭的。除了完全限制最终用户编写它的能力之外，还有更好的方法来确保 HTML 质量。使用这种方法，CKEditor 数据模型仍然负责最终可接受的内容——因此不要期望所有任意标记都能正常工作。
当然，如果您选择走这条路，请为可能发生的数据丢失做好准备 - 除非您竭尽全力实施适当的安全机制。这里的重要区别是用户正在做出接受风险的决定。
此示例不可访问。不要在面向用户的应用程序上使用它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 Source mode demo</title>
<style>
.editor-wrapper
position: relative;
.source
display: none;
.ck-editor
width: 500px !important;
.ck-content, .source
position: absolute !important;
height: 500px;
width: 500px;
</style>
</head>
<body>
<div class="editor-wrapper">
<div id="editor">
<p>Just some text.</p>
</div>
<textarea class="source"></textarea>
</div>
<script>
// Omitted all of the CKEditor framework JS
CKEditor5.editorClassic.ClassicEditor
.create( document.querySelector( '#editor' ), config )
.then( editor =>
window.editor = editor;
);
const source = document.querySelector('.source');
const editor = document.querySelector('.ck-editor__main');
const source_toggle = document.createElement('button');
source_toggle.textContent = 'Source mode'
source_toggle.classList.add('source-toggle');
source_toggle.setAttribute('aria-pressed', 'false');
source_toggle.addEventListener('click', function()
if (source_toggle.getAttribute('aria-pressed') === 'false')
source_toggle.setAttribute('aria-pressed', 'true');
source.value = window.editor.getData();
editor.style.display = 'none';
source.style.display = 'block';
else
source_toggle.setAttribute('aria-pressed', 'false');
window.editor.setData(source.value);
editor.style.display = 'block';
source.style.display = 'none';
);
const editor_toolbar = document.querySelector('.ck-toolbar');
editor_toolbar.appendChild(source_toggle);
</script>
</body>
</html>
【讨论】：
【参考方案4】：这是一段漫长而艰巨的旅程。我坐在这里试图破解“源代码编辑器”，因为 CKE 团队不相信编辑原始 html（但为什么？）
幸运的是，我偶然发现了一个偷偷摸摸的解决方案：
在我的情况下，我将 CKE5 online builder 与 React implementation 一起用于 Strapi CMS。
重点说明：
扩展经典编辑器-my notes for extending cke5 with react + strapi cms 作为builtinPlugins 的一部分，确保您同时拥有HtmlEmbed 和SourceEditing
仅在您的defaultToolbar 中包含SourceEditing
现在，当您想编写 100% 未修改的 html 时，您可以但必须在以下 div 中进行：
<div class="raw-html-embed">
<span class="something">nested</span>
<custom>Even this tag will stay intact</custom>
</div>
你们玩得开心
额外：
我不得不直接从CKEditor github 下载SourceEditor source 来破解SourceEditing 插件。我单独构建了它，然后imported 到我扩展 CKE5 的位置，以便添加插件/自定义工具栏。
【讨论】：
以上是关于CKEditor 5 - 如何插入一些 HTML（又名源模式在哪里）？的主要内容，如果未能解决你的问题，请参考以下文章