Drupal 10 CKEditor 5自定义插件报错：plugins.map is not a function

问题原因 #

报错Uncaught TypeError: plugins.map is not a function的核心原因是：

1. 自定义插件未遵循Drupal CKEditor5的官方扩展规范，而是通过Drupal.behaviors事后修改编辑器实例，导致系统无法正确识别插件列表
2. JS代码的插件注册逻辑完全不符合CKEditor5的插件体系要求

修复步骤 #

1. 修正.ckeditor5.yml配置 #

调整插件声明格式，使用数组形式明确指定插件名称：

small_text_ckeditor_small_text:
  ckeditor5:
    plugins:
      - SmallText
  drupal:
    label: 'Small Text'
    library: small_text_ckeditor/small_text
    toolbar_items:
      smallText:
        label: 'Small Text'
    elements:
      - '<small>'

2. 更新.libraries.yml #

指定JS文件为ES模块类型，并修正依赖项：

small_text:
  version: VERSION
  js:
    js/small_text.js: { type: module }
  dependencies:
    - core/ckeditor5
    - core/drupal

3. 重写js/small_text.js #

按照CKEditor5插件规范编写代码，通过Drupal.CKEditor5Plugin.add()将插件注册到Drupal系统：

/**
 * @file
 * Defines the 'Small Text' plugin for CKEditor 5.
 */

import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';
import { toggleFormat } from 'ckeditor5/src/typing';

export default class SmallText extends Plugin {
  static get pluginName() {
    return 'SmallText';
  }

  init() {
    const editor = this.editor;

    // 注册<small>元素的模型 schema
    editor.model.schema.register('small', {
      allowWhere: '$text',
      isInline: true,
    });

    // 配置模型与视图的双向转换
    editor.conversion.for('downcast').elementToElement({
      model: 'small',
      view: 'small',
    });

    editor.conversion.for('upcast').elementToElement({
      view: 'small',
      model: 'small',
    });

    // 添加文本格式切换命令
    editor.commands.add('smallText', {
      execute: toggleFormat,
      format: 'small',
    });

    // 注册工具栏按钮
    editor.ui.componentFactory.add('smallText', (locale) => {
      const button = new ButtonView(locale);

      button.set({
        label: Drupal.t('Small Text'),
        icon: '<svg viewBox="0 0 20 20"><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" style="font-size: 10px;">sm</text></svg>',
        tooltip: true,
        withText: false,
      });

      // 绑定按钮状态与命令状态
      button.bind('isOn', 'isEnabled').to(editor.commands.get('smallText'), 'value', 'isEnabled');

      // 点击按钮执行命令
      button.on('execute', () => {
        editor.execute('smallText');
        editor.editing.view.focus();
      });

      return button;
    });
  }
}

// 将插件注册到Drupal CKEditor5系统
Drupal.CKEditor5Plugin.add(SmallText.pluginName, SmallText);

4. 验证操作 #

1. 执行drush cr清除Drupal缓存（或通过后台配置页面清除）
2. 进入文本格式配置页面，将“Small Text”按钮添加到CKEditor5工具栏
3. 打开编辑器测试：选中文本点击按钮，确认标签正确包裹选中内容