关于CKEditor5使用工具栏插件后自动添加<p>标签的原因及解决方案的咨询

核心原因 #

CKEditor5的内容模型默认要求顶级节点必须是块级元素（比如<p>），而你初始的<span>Foo bar</span>是行内元素，不符合编辑器的内容结构规则。当你执行加粗操作时，编辑器会自动修正内容结构，把行内元素包裹到<p>标签里，确保内容符合预设的Schema规则。

关于你提到的两项功能： #

1. Schema

是的，Schema直接导致了这个转换。它是CKEditor5的内容规则定义系统，默认配置里只允许块级元素作为根节点（比如<p>、<h1>等），行内元素（如<span>）只能嵌套在块级元素内部。当编辑器检测到顶级节点是行内元素时，就会自动用<p>包裹它，来满足Schema的合法性要求。

2. Editor Engine

Editor Engine是执行这个转换的“执行者”。它负责处理所有编辑操作的实时内容转换，会严格按照Schema的规则校验并修正内容结构。当你触发加粗操作时，引擎会检查当前内容的层级结构，发现行内元素在根节点，就会自动完成<p>的包裹动作，保证编辑流程的稳定性和内容的合规性。

如何避免自动添加<p>标签？ #

如果你确实需要让行内元素作为顶级节点，可以通过以下方式实现：

方法1：自定义Schema，允许行内元素作为根节点

在编辑器初始化时，扩展Schema规则，允许<span>直接作为根节点：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // 其他配置项...
    } )
    .then( editor => {
        const schema = editor.model.schema;
        // 修改规则，允许<span>出现在根节点
        schema.extend( 'span', { allowWhere: '$root' } );
    } )
    .catch( error => {
        console.error( error );
    } );

方法2：调整数据处理规则（针对输出场景）

如果只是希望最终输出的HTML不带<p>标签，而不影响编辑时的体验，可以自定义数据处理器：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // 其他配置项...
    } )
    .then( editor => {
        // 重写数据输出逻辑，移除最外层的<p>标签
        const originalToData = editor.data.processor.toData.bind( editor.data.processor );
        editor.data.processor.toData = view => {
            let content = originalToData( view );
            // 匹配并移除首尾的<p>标签
            content = content.replace( /^\s*<p>(.*?)<\/p>\s*$/s, '$1' ).trim();
            return content;
        };
    } )
    .catch( error => {
        console.error( error );
    } );

注意：修改Schema可能会影响编辑器的一些默认行为（比如光标定位、换行逻辑），建议在测试环境充分验证后再部署到生产环境。

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