Grapesjs集成CKEditor时Mention功能失效并报错求助

问题描述 #

尝试在GrapesJS中集成CKEditor的Mention提及功能时，出现以下错误：

Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "{class:'mention'" was not found at "https://cdn.ckeditor.com/4.21.0/standard-all/plugins/{class:'mention'/plugin.js?t=N2M9".

同时WordCount等额外插件也无法正常运行。相同代码在Django CMS中可正常工作，但在GrapesJS环境下失效，Mention功能为核心需求，相关配置代码见下文。

核心原因 #

你使用的grapesjs-plugin-ckeditor默认集成CKEditor 4，但你的自定义插件（MentionLinks、上传适配器）和配置代码都是基于CKEditor 5的API编写的，两者完全不兼容：

• CKEditor 4的extraPlugins仅支持字符串格式的插件名称，无法直接传入插件函数，导致CKEditor错误地将函数对象解析为插件名称，生成无效的资源URL。
• CKEditor 4与CKEditor 5的插件体系、转换API、配置结构完全不同，直接复用CKEditor 5代码必然失效。

解决方案 #

方案一：改用GrapesJS集成CKEditor 5的插件 #

这是最省心的方案，可直接复用你现有的CKEditor 5代码：

1. 替换原有插件：安装grapesjs-plugin-ckeditor5替代grapesjs-plugin-ckeditor
2. 调整GrapesJS配置，适配CKEditor 5的初始化逻辑：

const editor = grapesjs.init({
  // ...其他GrapesJS配置
  plugins: ['grapesjs-plugin-ckeditor5'],
  pluginsOpts: {
    'grapesjs-plugin-ckeditor5': {
      editorConfig: {
        // 引入所需的CKEditor 5插件（含你的自定义插件）
        plugins: [
          Mention,
          WordCount,
          MyCustomUploadAdapterPlugin,
          MentionLinks,
        ],
        // 直接复用你原有的工具栏、Mention、WordCount等配置
        toolbar: [/* 你的工具栏配置 */],
        mention: {/* 你的Mention配置 */},
        wordCount: {/* 你的WordCount配置 */},
        // ...其他CKEditor 5配置
      },
    },
  },
});

方案二：适配CKEditor 4的代码写法 #

如果你坚持使用grapesjs-plugin-ckeditor（CKEditor 4），需要将所有自定义代码改为CKEditor 4的规范：

1. 注册自定义上传适配器插件（CKEditor 4版本）

CKEDITOR.plugins.add('myuploadadapter', {
  init: function(editor) {
    editor.fileTools.addUploadAdapter(function(loader) {
      return new MyUploadAdapter(loader);
    });
  }
});

2. 重写MentionLinks插件（适配CKEditor 4的转换规则）

CKEDITOR.plugins.add('mentionlinks', {
  init: function(editor) {
    // 处理输出：将CKEditor 4的Mention span转为自定义a标签
    editor.dataProcessor.htmlFilter.addRules({
      elements: {
        span: function(element) {
          if (element.hasClass('mention') && element.getAttribute('data-mention')) {
            const id = element.getAttribute('data-mention');
            const nt_title = id.slice(1).split(/\.(.+)/);
            const nt = encodeURIComponent(nt_title[0]);
            const title = encodeURIComponent(nt_title[1]);
            
            const aTag = new CKEDITOR.htmlParser.element('a', {
              class: 'mention',
              'data-mention': id,
              target: '_blank',
              href: `https://${window.location.hostname}/draw_graph/?ntype1=${nt}&title1=${title}&focusWithPropWin=true`
            });
            aTag.children = element.children;
            return aTag;
          }
        }
      }
    });

    // 处理输入：将自定义a标签转回CKEditor 4的Mention span
    editor.dataProcessor.dataFilter.addRules({
      elements: {
        a: function(element) {
          if (element.hasClass('mention') && element.getAttribute('data-mention')) {
            const spanTag = new CKEDITOR.htmlParser.element('span', {
              class: 'mention',
              'data-mention': element.getAttribute('data-mention')
            });
            spanTag.children = element.children;
            return spanTag;
          }
        }
      }
    });
  }
});

3. 调整GrapesJS的CKEditor配置

'grapesjs-plugin-ckeditor': {
  options: {
    versionCheck: false,
    // 用字符串数组指定插件名称（与注册的插件名一致）
    extraPlugins: 'mention,wordcount,myuploadadapter,mentionlinks',
    // CKEditor 4的Mention配置格式
    mention: {
      feeds: [
        {
          marker: '@',
          // CKEditor 4的feed需要传入回调函数
          feed: function(queryText, callback) {
            getNodeItems(queryText).then(callback);
          },
          minimumCharacters: 1,
          // CKEditor 4的item模板写法
          itemTemplate: function(item) {
            return `<div><span style='font-weight: bold'>@${item.type}.</span>${synthesize_string(item.title)}</div>`;
          }
        }
      ]
    },
    // CKEditor 4的WordCount配置（注意无onUpdate，需用事件监听字符计数）
    wordcount: {
      showCharCount: true,
      countSpacesAsChars: true,
      countHTML: false
    },
    // ...其他CKEditor 4配置
  }
}

4. 确保CKEditor 4加载所需插件

确认你的CKEditor 4 CDN链接包含mention和wordcount插件，若没有需手动添加插件路径。

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