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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CKEditor5内联构建在h1标记内放置一个p标记 - 如何禁用它?相关的知识,希望对你有一定的参考价值。

我正在尝试使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 } );

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

以上是关于CKEditor5内联构建在h1标记内放置一个p标记 - 如何禁用它?的主要内容,如果未能解决你的问题,请参考以下文章

html

内联标记块 (@<p>Content</p>) 不能嵌套。只允许一级内联标记

HTML常用标记属性CSS代码JS代码(速查)

CKEditor 5 缺少可用的工具栏项目

CSS 块级元素内联元素概念

HTML总结