React中CKEditor5 Mention安装异常及功能失效问题求助

问题根源 #

你遇到的ckeditor-duplicated-modules错误，是因为@ckeditor/ckeditor5-build-classic是预构建好的编辑器包，已经内置了一套核心CKEditor模块。单独安装@ckeditor/ckeditor5-mention时，会引入另一套版本不匹配的核心模块，导致依赖冲突。批量安装报错则是因为不同CKEditor包之间版本不兼容。

解决方案：自定义编辑器构建（推荐） #

预构建包的扩展性有限，自定义构建能彻底避免版本冲突问题，步骤如下：

1. 卸载现有冲突包
   执行命令清理已安装的相关依赖：

npm uninstall @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-mention

2. 安装所需的独立模块
   安装React组件、编辑器核心，以及你需要的功能模块（包括Mention）：

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-link @ckeditor/ckeditor5-mention

3. 修改代码，手动组装编辑器
   替换原来的代码，手动导入并配置所需插件：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { Link } from '@ckeditor/ckeditor5-link';
import { Mention } from '@ckeditor/ckeditor5-mention';

const CreatePage = () => {
  return (
    <div>
      <h2>CKEditor with Mentions</h2>
      <CKEditor
        editor={ClassicEditor}
        config={{
          plugins: [Essentials, Bold, Italic, Link, Mention],
          toolbar: ['mention', 'bold', 'italic', 'link'],
          mention: {
            feeds: [
              {
                marker: '@',
                feed: ['Alice', 'Bob', 'Charlie'],
              },
            ],
          },
        }}
      />
    </div>
  );
};

export default CreatePage;

为什么原来的代码不生效？ #

你之前直接给预构建的ClassicEditor添加Mention插件，而预构建包的核心模块版本与单独安装的Mention版本不一致，导致CKEditor识别到重复模块，进而抛出错误。自定义构建则是从基础模块开始组装，所有依赖版本保持一致，不会出现冲突。

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