32

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

除了 CKEditor 5 ，是否有与Source Editing Area插件等效的插件？

4

4 回答 4

13

是的，可以将 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);
  }
于 2020-02-14T04:11:17.150 回答
10

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

  • 一般而言，源模式是否有意义。
  • 是否可以允许向 CKEditor 5 输入（和编辑）任何 HTML。

它们已经在 CKEditor 5 的 GitHub 上的“查看源代码”模式和“如何保留标记而不被删除”票证中进行了讨论，但我将尝试在这里快速解释它们。

源模式有意义吗？

并不真地。对于一小群了解 HTML 并且可以可靠地手动编辑它的人来说，这很有意义，但是为什么要使用富文本编辑器呢？

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

让我们通过一个类比来看这个。富文本编辑器只是编辑某些数据的界面（在本例中为 HTML 格式）。同样，CMS 是编辑数据库的界面。那么，您是否允许普通用户直接访问您的数据库？您是否通过手动将产品添加到数据库中mysqladamin？我不这么认为。对于普通用户来说，这既不方便也不安全，也无法理解。

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

我真的鼓励您阅读“查看源代码”模式，因为我们已经触及了许多有趣的主题（例如结构化内容是什么）。

是否可以将任何 HTML 输入到 CKEditor 5？

不，我会在这里引用自己的话：

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

换句话说，由于数据模型，一个特性需要实现它处理的特定内容（标签、属性等）的完整生命周期——从数据加载到渲染以进行编辑、编辑自身和数据恢复。

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

新时代

时代变了。多年来，我们一直试图教育开发人员应该如何使用富文本编辑器，但所见即所得的用于编辑整个网站的黑暗时代在人们的脑海中仍然很强烈。

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

于 2017-12-12T15:13:37.793 回答
3

似乎可以将它editor.getData()与editor.setData()一个元素一起破解，textarea以产生一个穷人的“源代码编辑器”。我可以看到这个例子被装扮成 codemirror 之类的东西来产生可用的东西。

如果 CKEditor 团队不希望在 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>

动画显示可以进行基于文本的编辑

于 2021-07-03T03:06:21.217 回答
2

这是一段过于漫长而艰巨的旅程。我坐在这里试图破解“源代码编辑器”，因为 CKE 团队不相信编辑原始 html（但为什么？）

幸运的是，我偶然发现了一个偷偷摸摸的解决方案：

在我的例子中，我使用CKE5 在线构建器和 Strapi CMS的React 实现。

关键说明：

现在，当您想编写 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 源来破解 SourceEditing 插件。我单独构建它，然后将它编辑到我扩展 CKE5 的位置，以便添加插件/自定义工具栏。import

于 2021-07-08T00:47:23.420 回答