CKEditor5内联构建在h1标记内放置一个p标记 - 如何禁用它？

Posted 2021-04-11

我正在尝试使h1标签可编辑。

我的html是

<h1 id="theh1">
    Hello how are you?
</h1>

我的JS是

e = document.getElementById("theh1");
InlineEditor
    .create( e,{
        removePlugins: [ 'Heading', 'Link' ],
        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
      } )
      .catch( error => {
          console.error( error );
      } );

这是一个JSFiddle：https://jsfiddle.net/r66uhfee/3/

如果你查看源代码，你会看到h1标签在编辑后有一个p元素。如何禁用此行为？

答案

不幸的是，CKEditor 5还不支持这种开箱即用。 Allow enabling all types of editors on paragraph-like root票证中描述了此功能。

但是，此功能可能非常容易添加。关键的代码行在每个编辑器创建者中，如下所示：

https://github.com/ckeditor/ckeditor5-editor-classic/blob/d46af9fe4627da3f2f0b29349b1cbdabdf550637/src/classiceditor.js#L74：

this.model.document.createRoot();

使用默认值调用createRoot()方法，因此它始终创建一个名为$root的根，schema将其配置为仅允许块（如段落和标题）。

如果您创建了一个名为paragraph的根，那么该根只允许其中的文本，编辑器将停止创建段落：

this.model.document.createRoot( 'paragraph' );

您可能需要解决的另一件事是，在这种特殊情况下，某些功能可能依赖于此paragraph在架构中被标记为limit element，因此，在类似段落元素的特定编辑器中，它' d也可以这样做：

editor.model.schema.extend( 'paragraph', { isLimit: true } );

但是，我们没有对此进行测试，我们还没有为它设计合适的自动解决方案，这就是故障单仍然打开的原因。所以 - 框架应该允许这样，但实现不考虑这种情况。