为什么CKEditor删除全部文本时p标签会被移除？不同初始化容器差异咨询

问题成因 #

• 用<p>标签作为编辑器初始化容器不符合CKEditor的设计规范：<p>标签本身属于行内容器，无法嵌套其他块级元素，CKEditor初始化时会直接将宿主<p>标签作为编辑器根节点，删除内容时无法删除自身根节点，就会出现占位<p>标签始终保留的表现。
• 替换为<div>容器后出现的失焦才重建占位标签的问题，属于编辑器的默认空内容处理逻辑：编辑器聚焦状态下为了适配连续删除、全量替换等操作，允许临时出现根节点为空的状态，失焦后会自动触发空内容校验，补入默认的占位<p>标签。如果同一页面部署了多个编辑器实例，还可能因为实例配置复用、状态冲突放大这个表现，和预期行为不一致。

对应解决方法 #

1. 所有编辑器实例统一使用<div>标签作为初始化容器，不要使用<p>、<span>等语义受限的标签作为宿主容器，从根源避免schema校验冲突。
2. 如果需要实现「删除所有内容后，无论是否聚焦始终保留占位<p>标签」的效果，可在编辑器配置中添加空内容强制填充逻辑，配置示例如下：

// 每个编辑器实例使用独立的配置对象，不要复用同一个配置避免状态串扰
const editorConfig = {
  placeholder: 'Type some text...',
  // 开启空块自动填充
  fillEmptyBlocks: true,
  // 强制默认块元素为p标签
  defaultBlock: 'p'
}

// 多实例初始化时分别传入独立配置
ClassicEditor.create( document.querySelector('#editor1'), editorConfig )
ClassicEditor.create( document.querySelector('#editor2'), {...editorConfig} )

3. 多实例场景下确保每个编辑器的宿主DOM节点有独立的id属性，初始化后的实例对象存储在独立变量中，不要挂载到全局对象避免相互覆盖。如果仍存在状态冲突，可以在初始化后为每个实例单独设置editor.model.document.on('change:data', callback)校验根节点内容，为空时主动插入占位<p>标签即可。

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