CKEditor5 Inline构建：如何禁用h1标签内自动生成p标签的行为？

这个问题其实是CKEditor5的默认行为导致的——它会自动把未被块级元素包裹的文本内容封装成<p>标签，哪怕你是在<h1>元素上初始化的Inline编辑器。要禁用这个自动嵌套，你可以通过以下几步配置来解决：

1. 禁用自动段落包裹 #

首先，在编辑器配置里设置autoParagraph: false，这会直接阻止编辑器把纯文本自动包裹成<p>标签：

InlineEditor.create(document.querySelector('h1'), {
  autoParagraph: false,
  // 其他配置项...
});

2. 指定编辑器根节点为H1对应的模型 #

为了让编辑器明确知道当前编辑的是H1块，你需要配置editable.rootName为heading1（对应H1的模型名称），同时确保heading插件的选项里包含H1：

InlineEditor.create(document.querySelector('h1'), {
  autoParagraph: false,
  editable: {
    rootName: 'heading1'
  },
  heading: {
    options: [
      { model: 'heading1', view: 'h1', title: 'Heading 1' }
    ]
  },
  // 如果不需要工具栏，可以设为空数组
  toolbar: []
})
.then(editor => {
  console.log('Editor initialized:', editor);
})
.catch(error => {
  console.error('Error initializing editor:', error);
});

3. 确保初始H1元素结构正确 #

初始化编辑器前，你的H1元素应该是纯文本内容，不要嵌套<p>标签：

<!-- 正确的初始结构 -->
<h1 id="editable-heading">My Editable Heading</h1>

<!-- 错误的结构（会导致嵌套问题） -->
<h1 id="editable-heading"><p>My Editable Heading</p></h1>

这样配置后，你编辑H1内容时，编辑器会直接把文本放在<h1>标签内部，不会自动生成嵌套的<p>标签了。如果之后需要支持其他标题级别，只需要在heading.options里添加对应的配置项即可。

内容的提问来源于stack exchange，提问作者Nick Manning