CKEditor 5-如何插入一些HTML(又称源代码模式)?

M U*_*M U 11 javascript ckeditor ckeditor5

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

除了CKEditor 5外,是否有与Source Editing Area插件等效的插件?

Rog*_*ger 12

是的,可以将 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);
  }  
Run Code Online (Sandbox Code Playgroud)


Rei*_*mar 5

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

  • 通常,源模式是否有意义。
  • 是否可以允许向CKEditor 5输入(和编辑)任何HTML。

已经在CKEditor 5的GitHub上的“查看源代码”模式和“如何保留标记而不将其删除”票证中进行了讨论,但是我将在此处尝试对其进行快速解释。

源模式有意义吗?

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

您可以说,这不是问题吗?只有高级用户才能编辑HTML。其余的将使用“所见即所得”模式。但是这里出现了另一组问题。您只是将任意HTML插入编辑器,现在其他用户尝试以WYSIWYG模式进行编辑。但是由于这是编辑器无法理解的HTML(因为没有处理它的功能),因此很有可能随着时间的推移而被销毁。那些HTML Blob将被分割,加粗,包装,错误地复制和粘贴等。您可以说源代码模式再次被证明是有用的,因为由于缺少适当的UI来编辑该Blob,您需要手动修复它。但是,等等-人们难道为什么讨厌讨厌富文本编辑器吗?

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

因此,请勿尝试手动编辑HTML。如果CMS缺少功能,则只需添加功能。使用富文本编辑器执行相同的操作。如果您没有教给他们这种HTML意味着什么以及如何对待它们,也不要怪他们破坏了您手工制作的HTML。

我真的鼓励您阅读“查看源代码”模式,因为我们接触了很多有趣的主题(例如,结构化内容是什么)。

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

不,我在这里引用自己:

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

换句话说,由于数据模型的缘故,功能需要实现其要处理的特定内容(标签,属性等)的整个生命周期-从数据加载到渲染,编辑,编辑自身和数据恢复。

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

新时代

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

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

  • 谢谢(你的)信息。他们决定走这条路,让我有些难过。我希望他们将继续维护版本4,因为这将使许多项目无法升级。有时,客户需要的功能是没有意义的,而实际的开发人员仍然必须交付这些功能。 (9认同)