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

Question

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

javascriptckeditorckeditor5

34

我希望能够从所见即所得模式切换到纯HTML模式，例如插入一个包含YouTube视频的IFrame。目前标准的CKEditor 5构建版本中没有关于如何实现这一点的文档。

是否有相当于CKEditor 5的Source Editing Area插件的替代方案？

- Marek Urbanowicz

这个问题对于 CKEditor 5 的开发人员和使用所见即所得编辑器的人来说是可以理解的，因此请不要关闭它（我看到了负评）。 - Reinmar

使用Ckeditor，最初文档记录得很好。请尝试访问以下链接：https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html#Listing-available-items，特别是“您可以使用以下代码段检索编辑器中所有可用的工具栏项目：Array.from(editor.ui.componentFactory.names);”部分。 - pokeybit

不起作用。它返回已配置的元素数组... - Marek Urbanowicz

1

我知道这是一个旧的帖子，但我想提一下这个编辑器：https://github.com/xdan/jodit，因为我们想在我们的商店解决方案中使用CKEditor5，但我们需要HTML功能。 - Bluesight

5个回答

10

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

源代码模式是否有意义。
是否可以允许输入（和编辑）任何HTML到CKEditor 5中。

它们已经在CKEditor 5的GitHub上的"View Source" mode和"How to preserve markup and not have it removed"票据中进行了讨论，但我会在此快速解释它们。

源代码模式有意义吗？

不完全有意义。对于懂得HTML并且能够可靠地手动编辑它的一小群人来说，这是有意义的，但那么为什么还要使用所谓的所见即所得编辑器呢？

你可以说，这不是问题吗？只有高级用户才会编辑HTML。其他人将使用所见即所得模式。但是，另一组问题出现了。你刚刚将任意HTML插入编辑器，现在其他用户尝试在所见即所得模式下编辑它。但由于这是编辑器不理解的HTML（因为没有处理它的功能），有很大的机会随着时间的推移被破坏。那些HTML块可能会被拆分、加粗、包装、不正确地复制和粘贴等等。你可以说源代码模式再次证明是有用的，因为由于缺乏适当的UI来编辑该块，你需要手动修复它。但等等——难道不是所有这些混乱的原因都是人们讨厌所谓的所见即所得编辑器吗？

让我们通过比喻来看待这个问题。富文本编辑器只是一个编辑某些数据的接口（在这种情况下是HTML格式）。同样，CMS是一个编辑数据库的接口。那么你会直接给普通用户访问你的数据库吗？你会通过mysqladamin手动添加产品到你的数据库吗？我认为不会。这既不方便，也不安全，普通用户也无法理解。

所以不要试图手动编辑HTML。如果你的CMS缺少某个功能，你只需要添加该功能。对于富文本编辑器也是如此。如果你没有教会它们这个HTML的含义和如何处理它，就不要责怪它们破坏了你手工制作的HTML。

我真的鼓励你阅读"查看源代码"模式，因为我们在那里涉及了许多有趣的主题（例如结构化内容是什么）。

是否可以在CKEditor 5中输入任何HTML？

不可以。我在这里引用自己的话：

CKEditor 5采用自定义数据模型。为向该模型加载数据，您需要针对要支持编辑器的每个内容块创建视图->模型转换器。然后，您需要模型->视图转换器来使此内容可编辑（它需要在编辑器中呈现以进行编辑）。最后，您需要配置模式并有时自定义某些功能，例如Enter，以便它们知道将其加载到编辑器中的内容的含义以及如何修改它。

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

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

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

随着CKEditor 5的推出，由于数据模型和整体架构的原因，不再有编辑任意HTML的选项，这迫使开发人员重新思考他们的集成。与此同时，数据模型的存在和全新的架构使得实现编辑功能变得更加容易，这将最终真正变得可行。这当然不是免费的，但最终效果也会更好。

- Reinmar

24

谢谢提供信息。我有点难过他们决定采取这个路线。我希望他们继续维护第四版，因为这将阻止许多项目进行升级。有时客户需要一些看似不合理的功能，而现场开发人员仍然必须交付。 - Typel

谢谢，但这是一个旧事实... 3年前，有一个更新：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#where-are-the-editorinserthtml-and-editorinserttext-methods-how-to-insert-some-content，现在你可以在CkEditor5中插入一些HTML！ - Hicham O-Sfh

1

我认为上述是一个非常糟糕的借口，当然我们需要能够编辑HTML。 - Amir

4

似乎可以通过结合

元素和editor.getData()、editor.setData()方法来实现一个简陋的“源代码编辑器”，可以使用类似于CodeMirror的东西美化这个例子以得到可用的结果。</p>

如果CKEditor团队不想在CKEditor内部采用这种机制，那也没关系，但是直接说HTML编辑是错误的或者来自黑暗时代，在我看来比较闭塞。有很多更好的方法来确保HTML的质量，而不是完全限制最终用户编写HTML的能力。采用这种方法，CKEditor数据模型仍然负责最终确定何种标记是可接受的，因此不要期望所有任意标记都能正常工作。</br><div class="h-2"></div>当然，如果选择这种方案，应该为数据损失做好准备——除非想要采取额外的措施来实施适当的安全机制。重要的区别在于，用户正在决定是否接受风险。</br><div class="h-2"></div>此示例不可访问。请勿在用户界面应用程序中使用此示例。</br><div class="h-2"></div><pre class="guess-JavaScript"><code><!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>
</code></pre>

- Luke A. Leber

2

这是一段漫长而艰苦的旅程。我正在尝试黑客式地编辑“源代码编辑器”，因为CKE团队不支持编辑原始HTML（但为什么？）。

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

在我的情况下，我正在使用CKE5在线构建器和React实现来为Strapi CMS提供支持。

关键要点：

- 扩展经典编辑器 - 我的扩展CKE5与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源代码来拼凑SourceEditing插件。我单独构建了它，然后在扩展CKE5并添加插件/自定义工具栏的地方进行了导入。

- Jacksonkr

1

如果您想知道如何在Ckeditor5中插入HTML/查看源代码插件，请按照以下步骤操作：

创建自己的Ckeditor5构建。前往Ckeditor在线构建器。

https://ckeditor.com/ckeditor-5/online-builder/
选择你想要的插件和工具栏
按照所有步骤并下载构建文件夹
像这样在您的网页中包含。

src="./ckeditor5-34.1.0-to6amocvzyre/build/ckeditor.js"

初始化Ckeditor

  ClassicEditor
         .create( document.querySelector( '#post-editor' ), {
             licenseKey: '',

         } )
         .then( editor => {
             window.editor = editor;
         } )
         .catch( error => {
             console.error( 'Oops, something went wrong!' );
             console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
             console.warn( 'Build id: to6amocvzyre-ms4eax6uq5yt' );
             console.error( error );
         } );

更多信息请查看示例文件夹中的index.html

- Muhammad Shahzad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roger · Accepted Answer

是的，可以在CKEditor5中插入HTML：

  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);
  }