CKEditor中span嵌套a标签时href继承问题求助

问题重现 #

自定义插件添加的span元素，插入a标签内时会导致a标签被拆分：

<p>
    <a href="URL">This is a </a><span>span element</span><a href="URL"> inside a link.</a>
</p>

添加allowAttributesOf: '$text'后，span可嵌套进a，但会继承href属性：

<p>
    <a href="URL">This is a <span href="URL">span element</span> inside a link.</a>
</p>

期望实现：span作为a的子元素，且不继承href属性：

<p>
    <a href="URL">This is a <span>span element</span> inside a link.</a>
</p>

问题原因 #

1. 初始拆分问题：CKEditor Schema默认不允许span作为a的直接子元素，编辑器会自动拆分a标签来符合规则。
2. 属性继承问题：allowAttributesOf: '$text'会让span继承所有文本节点的属性，而linkHref是CKEditor用于标记链接的内部属性，因此span会被自动添加上href属性。

解决方案 #

1. 正确配置Schema，允许span嵌套进a标签 #

不要使用allowAttributesOf: '$text'，改为直接配置span的允许父元素，并扩展a标签的允许子元素：

editor.model.schema.register('span', {
    inheritAllFrom: '$inline', // 继承行内元素的基础特性
    allowIn: ['a', 'p', 'h1', 'h2', ...其他需要的父元素], // 明确允许span在a内
    attributes: {
        // 仅定义span自身需要的属性，比如插件内的icon相关属性，不要包含linkHref
        iconName: { type: 'string', defaultValue: null },
        // 其他自定义属性...
    }
});

// 扩展a标签的Schema，允许span作为子元素
editor.model.schema.extend('a', {
    allowChildren: ['span', '$text', ...editor.model.schema.getDefinition('a').allowChildren || []]
});

2. 阻止span继承linkHref属性 #

通过downcast转换器拦截span的linkHref属性设置，确保输出时不包含该属性：

editor.conversion.for('downcast').add((dispatcher) => {
    dispatcher.on('attribute:linkHref:span', (evt) => {
        // 阻止linkHref属性应用到span元素上
        evt.stop();
    });
});

3. 额外检查：插件内的元素配置 #

检查自定义插件中span元素的注册代码，确保没有主动继承文本属性或添加不必要的属性继承规则，避免冲突。

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