如何在CKEditor 5中创建带自定义初始属性的下划线标签？

1. 扩展模型Schema，允许UNDERLINE属性携带cid数据 #

首先需要让CKEditor的模型支持给下划线（UNDERLINE）属性附加cid参数，否则模型不会存储该属性：

editor.model.schema.extend(UNDERLINE, { allowAttributes: 'cid' });

2. 修改视图转换规则，映射模型属性到视图自定义属性 #

更新attributeToElement的配置，添加attributes字段，把模型中的cid属性映射到视图的data-cid属性：

editor.conversion.attributeToElement({
    model: UNDERLINE,
    view: {
        name: 'u',
        styles: {
            'text-decoration': 'underline dotted',
            'color': 'red'
        },
        // 新增属性映射：模型cid → 视图data-cid
        attributes: {
            'data-cid': '$cid'
        }
    },
    converterPriority: 'high'
});

3. 添加视图到模型的反向转换（可选） #

如果需要从现有HTML中识别data-cid属性并同步到模型，需要添加向上转换规则：

editor.conversion.for('upcast').attributeToAttribute({
    view: {
        name: 'u',
        key: 'data-cid'
    },
    model: {
        key: 'cid',
        value: viewElement => viewElement.getAttribute('data-cid')
    }
});

4. 执行下划线命令时传入cid参数 #

在触发下划线命令时，携带cid参数即可生成目标HTML：

// 示例：给选中内容添加带data-cid="458"的下划线
editor.execute(UNDERLINE, { cid: '458' });

执行以上配置后，生成的HTML会变为：

<u data-cid="458" style="text-decoration: underline dotted; color: red;">some content</u>

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