如何在CKEditor5中创建基于真实节点而非文本属性的可编辑内联元素

需求清单 #

• 可编辑内联元素，可添加至文本任意插入位置；
• 标签内容支持编辑；
• 空标签需可见，且作为独立树节点存在（非文本属性形式）；
• 标签需有视觉高亮效果（如背景色、圆角样式）；
• 空标签通过 CSS ::before 伪类显示标签类型；
• 支持切换编辑状态（需区分只读与可编辑标签）。

已尝试的两种方案 #

方案1：文本属性模拟标签 #

通过文本属性创建带样式的文本模拟标签，代码如下：

writer.createText('my tag', {tag: tagType})

这种方式类似实现粗体文本，靠CSS样式模拟标签外观，但存在明显局限：无法让同一CKEditor实体兼具可编辑与只读状态，且本质是文本属性，不符合"独立树节点"的要求。

方案2：EditableElement 实现内联元素 #

在模型侧注册test-tag元素，视图侧用EditableElement实现，代码如下：

// 模型侧注册元素
this.editor.model.schema.register( 'test-tag', {
    allowChildren: '$text',
    allowWhere: '$text',
    allowAttributesOf: '$text',
    isObject: true        
});
// 编辑视图转换
this.editor.conversion.for('editingDowncast').elementToElement({
    model: 'test-tag',
    view: (modelItem, conversionApi) => {
        let { writer: viewWriter } = conversionApi;
        const tagView = viewWriter.createEditableElement( 'div', {
            class: 'inline'
        });
        return tagView;
    }
})

EditableElement 原本仅适用于块元素，通过CSS设置display:inline-block转为内联后，空标签无法被光标选中，交互行为异常；若设置isInline: true，则表现又和文本属性方案类似，达不到预期效果。

寻求思路建议 #

目前倾向基于文本属性方案优化，但更希望找到简洁实现方式：在模型侧创建独立的内联可编辑元素（类似<span>标签），同时满足上述所有需求，求可行的实现思路或优化方向。

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