CKEditor 5：如何在评论功能中使用Mentions提及功能？

核心前置说明 #

评论模块的输入框是独立于正文主编辑器的单独CKEditor实例，绝大多数集成失败的原因都是只给正文编辑器配置了mentions能力，没有给评论区的编辑器实例传入对应配置。

具体实现步骤 #

• 第一步：引入必备插件
  确保项目已经引入Mention插件，该插件是CKEditor 5官方自带的特性包内容，不需要额外安装第三方依赖。
• 第二步：给评论编辑器实例注入mentions配置
  在主编辑器初始化的配置项中，通过comments.editorConfig字段专门为评论输入区的编辑器传入插件列表和mentions规则，不要只在主编辑器根配置下写mention参数。参考配置代码如下：

  import { Mention } from '@ckeditor/ckeditor5-mention';
  
  ClassicEditor.create(document.querySelector('#editor-container'), {
    // 主编辑器原有配置：插件列表、工具栏、上传配置等
    plugins: [ /* 主编辑器需要的所有插件，包括CommentsRepository等评论相关插件 */ ],
    toolbar: [ /* 主编辑器工具栏配置 */ ],
  
    // 专门针对评论模块编辑器的配置
    comments: {
      editorConfig: {
        // 评论输入框编辑器需要加载的插件，必须包含Mention
        plugins: [ Mention, Bold, Italic, Link ],
        // mentions规则配置
        mention: {
          feeds: [
            {
              marker: '@', // 触发提及的标识字符
              minimumCharacters: 1, // 输入1个字符后开始触发匹配
              // 提及数据源方法，支持同步返回/异步Promise返回，参数是当前输入的关键字
              feed: async (searchText) => {
                // 这里写自己的用户匹配逻辑，比如拉取用户列表、按关键字过滤
                // 最终返回格式为包含id、name字段的对象数组即可，比如：
                // return userList.filter(user => user.name.includes(searchText)).slice(0, 10)
                return await fetchMatchedUsers(searchText);
              },
              // 自定义下拉候选列表的单项渲染，可选，不配置会用默认纯文本样式
              itemRenderer: (user) => {
                const itemEl = document.createElement('div');
                itemEl.className = 'custom-mention-item';
                itemEl.innerHTML = `<img src="${user.avatar}" class="user-avatar"/><span>${user.name}</span>`;
                return itemEl;
              }
            }
          ]
        }
      }
    }
  })
  

• 第三步：配置数据过滤规则
  提及内容插入后会生成带特定属性的span标签：<span class="mention" data-mention-id="{用户ID}" data-mention-name="{用户名}">@用户名</span>，后端存储评论内容、前端回显评论时不要过滤掉这几个自定义属性和类名，否则会导致提及元素失效变成纯文本。

常见问题处理 #

• 如果输入@后没有弹出下拉列表：优先检查评论实例的editorConfig里有没有注册Mention插件，有没有正确配置feeds规则，不要把mention配置写在主编辑器根层级。
• 如果异步拉取用户列表卡顿：建议feed方法每次最多返回10-20条匹配结果，不要返回全量用户数据。
• 如果需要自定义提及项的展示样式：直接给.mention类编写CSS即可，比如加浅蓝背景、圆角、内边距和普通文本做区分。
• 实时协作场景下：只要所有端的评论编辑器配置了相同的mention规则，提及数据会跟着评论线程自动同步，不需要额外做数据转换。

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