CKEditor5自动将首个标签替换为h1标签如何禁用？

这个问题通常由两个默认配置触发：一是编辑器内置的AutoHeading自动标题插件，二是Heading插件开启了文档专属的showTitle模式，两种情况都会强制将首行内容（包括初始写入的p标签内容）转换为H1标签，可通过以下方案修复：

方案1：移除AutoHeading插件禁用自动转换 #

AutoHeading插件的默认逻辑就是监听空文档的首行输入，自动将首行块级元素转换为H1标签，直接在初始化配置中移除该插件即可关闭这个规则：

ClassicEditor.create(document.querySelector('#editor'), {
  // 其余业务配置
  removePlugins: ['AutoHeading']
}).catch(err => {
  console.error(err)
})

方案2：关闭Heading插件的文档标题模式 #

如果你的编辑器配置中开启了showTitle配置项，编辑器会进入文档编辑模式，强制将首行作为文档主标题（H1），无论原标签是什么类型，修改heading配置即可关闭该逻辑：

ClassicEditor.create(document.querySelector('#editor'), {
  // 其余业务配置
  heading: {
    showTitle: false,
    // 可按需自定义支持的标题层级
    options: [
      { model: 'paragraph', title: '正文', class: 'ck-heading_paragraph' },
      { model: 'heading1', view: 'h1', title: '一级标题', class: 'ck-heading_heading1' },
      { model: 'heading2', view: 'h2', title: '二级标题', class: 'ck-heading_heading2' },
      { model: 'heading3', view: 'h3', title: '三级标题', class: 'ck-heading_heading3' }
    ]
  }
}).catch(err => {
  console.error(err)
})

方案3：兜底拦截非法自动转换 #

如果配置后仍存在初始赋值时首行p标签被强制转换的问题，可以通过模型变更监听做兜底处理，拦截非用户主动设置的H1转换：

const editor = await ClassicEditor.create(document.querySelector('#editor'))
// 监听内容变更
editor.model.document.on('change:data', () => {
  const rootNode = editor.model.document.getRoot()
  const firstBlock = rootNode.getChild(0)
  // 若首行被自动转为H1，强制改回普通段落
  if (firstBlock?.is('element', 'heading1') && !firstBlock.getAttribute('manualSet')) {
    editor.model.change(writer => {
      writer.rename(firstBlock, 'paragraph')
    })
  }
})

提示：如果你使用的是预构建好的CKEditor5包，不需要重新编译构建，直接在初始化时传入上述removePlugins和heading配置即可生效。

内容的提问来源于stack exchange，提问作者Alex Gift