在Remix JS中集成CKEditor提及功能时遇错误求助

问题根源 #

你使用的ckeditor5-custom-build是预构建的CKEditor包，这类包默认不包含@ckeditor/ckeditor5-mention插件，直接单独导入该插件会和构建包内的CKEditor核心版本冲突，导致模块加载错误。

解决方案 #

1. 自定义构建包含Mention插件的CKEditor

• 克隆官方经典构建模板：

  git clone https://github.com/ckeditor/ckeditor5-build-classic.git
  cd ckeditor5-build-classic
  

• 安装Mention插件依赖：

  npm install @ckeditor/ckeditor5-mention --save-dev
  

• 修改src/ckeditor.js，导入并添加Mention插件到配置：

  import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  // 导入Mention插件
  import Mention from '@ckeditor/ckeditor5-mention/src/mention';
  
  export default class ClassicEditor extends ClassicEditorBase {}
  
  // 内置插件列表添加Mention
  ClassicEditor.builtinPlugins = [
    Essentials,
    Paragraph,
    Bold,
    Italic,
    Mention
  ];
  
  ClassicEditor.defaultConfig = {
    toolbar: {
      items: [
        'bold',
        'italic',
        '|',
        'undo',
        'redo'
      ]
    },
    language: 'en',
    // 配置默认提及规则
    mention: {
      feeds: [
        {
          marker: '@',
          feed: ['@Alice', '@Bob', '@Charlie'],
          minimumCharacters: 1
        }
      ]
    }
  };
  

• 构建自定义编辑器：

  npm run build
  

• 将构建后的build目录内容复制到Remix项目的public文件夹下（比如public/ckeditor/build/）。

2. 在Remix组件中使用自定义编辑器

• 导入构建好的编辑器和React组件：

  import { useState } from 'react';
  import Editor from '../public/ckeditor/build/ckeditor';
  import { CKEditor } from "@ckeditor/ckeditor5-react";
  

• 组件内配置动态提及功能（可选）：

  export default function EditorComponent() {
    const [content, setContent] = useState('');
  
    // 动态获取提及列表的示例
    const getMentionFeed = async (searchText) => {
      // 替换为你的API请求逻辑
      const response = await fetch('/api/users');
      const users = await response.json();
      return users.map(user => `@${user.name}`).filter(item => item.toLowerCase().includes(searchText.toLowerCase()));
    };
  
    return (
      <div>
        <CKEditor
          editor={Editor}
          data={content}
          onChange={(event, editor) => setContent(editor.getData())}
          config={{
            mention: {
              feeds: [
                {
                  marker: '@',
                  feed: getMentionFeed,
                  minimumCharacters: 1
                }
              ]
            }
          }}
        />
      </div>
    );
  }
  

注意事项 #

• 确保@ckeditor/ckeditor5-mention的版本与CKEditor核心版本完全一致，避免版本不兼容问题。
• Remix中需确保静态资源路径正确，可通过public目录直接访问构建后的编辑器文件。
• 动态feed请求需处理异步加载状态和错误情况，避免编辑器卡顿。

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