如何修改CKEditor5中提及插件的输出DOM元素

你的代码未生效的核心问题是未返回writer.createUIElement()创建的元素，同时需要正确处理原提及的属性并构建嵌套DOM结构。以下是修正后的实现代码：

// 先移除默认的提及向下转换规则，避免冲突
editor.conversion.for('downcast').remove('mention');

// 自定义提及的向下转换
editor.conversion.for('downcast').attributeToElement({
  model: 'mention',
  view: (modelAttributeValue, { writer }) => {
    // 创建父级span UI元素，携带所需属性
    return writer.createUIElement('span', {
      class: 'mention mention-parent',
      'data-mention': modelAttributeValue.id, // 对应原提及的@lilypad，根据实际模型结构调整
      id: 'parent-id'
    }, function(domDocument) {
      const parentDom = this.toDomElement(domDocument);
      
      // 添加原提及文本内容
      parentDom.textContent = modelAttributeValue.id;
      
      // 创建并配置子span元素
      const childSpan = domDocument.createElement('span');
      childSpan.className = 'mention mention-child';
      childSpan.id = 'child-id';
      childSpan.textContent = 'Sample text';
      
      // 将子元素追加到父元素中
      parentDom.appendChild(childSpan);
      
      return parentDom;
    });
  }
});

关键说明： #

• 必须返回创建的UIElement：原代码没有返回writer.createUIElement()的结果，导致转换逻辑未被应用
• 复用原提及属性：通过modelAttributeValue获取原提及的标识（如id对应@lilypad），确保保留data-mention属性以维持提及功能的原有逻辑
• 原生DOM构建嵌套结构：在UIElement的回调中使用原生DOM API创建子元素，比直接设置innerHTML更安全可靠
• 移除默认转换：如果原提及插件已存在默认的downcast规则，需要先移除避免冲突

额外提示： #

• 可以在view回调中添加console.log(modelAttributeValue)，查看实际的模型属性结构，调整取值路径
• 若需要动态ID，不要使用固定值，可结合提及的唯一标识生成（如parent-${modelAttributeValue.id}）

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