React中CKEditor5 Mention插件无法显示问题求助

针对你的情况，以下是几个可能的原因和对应的解决方法：

1. 确认Mention插件已正确导入并注册 #

如果使用的是自定义构建的编辑器或直接导入插件，仅在extraPlugins中声明'Mention'是不够的，需要先导入插件模块并在配置里注册：

// 导入Mention插件
import Mention from '@ckeditor/ckeditor5-mention/src/mention';
// 导入你使用的编辑器（以ClassicEditor为例）
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

const editorConfiguration = {
  // 用plugins字段明确注册所需插件
  plugins: [Mention, /* 其他你需要的插件，比如Essentials、Paragraph等 */],
  // 你的mention配置...
};

如果使用的是预构建编辑器包（比如@ckeditor/ckeditor5-build-classic），默认不包含Mention插件，需要自定义构建编辑器来加入该插件。

2. 修正feed项的格式问题 #

你的feed数组中每个项都带了@前缀，但marker已经设置为@，插件会自动在匹配文本前添加marker，feed项只需保留名称本身即可：

mention: {
  feeds: [
    {
      marker: '@',
      // 去掉每个项前面的@符号
      feed: ['Barney', 'Lily', 'Marry Ann', 'Marshall', 'Robin', 'Ted'],
      minimumCharacters: 1
    }
  ]
}

3. 确保样式文件被正确加载 #

Mention插件的下拉列表需要对应CSS样式才能正常显示，若未加载样式，列表可能被隐藏或样式错乱。需要导入插件的样式文件：

// 导入Mention插件的样式
import '@ckeditor/ckeditor5-mention/theme/mention.css';

4. 确认配置已正确传递给CKEditor组件 #

在React组件中，务必确保editorConfiguration被正确传给CKEditor的config属性：

import { CKEditor } from '@ckeditor/ckeditor5-react';

function MyEditor() {
  return (
    <CKEditor
      editor={ClassicEditor}
      config={editorConfiguration}
      data="<p>Start typing @...</p>"
    />
  );
}

尝试以上步骤后，应该能正常触发提及列表的显示。

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