如何在Drupal 9的CKEditor 5中添加Dialog插件？

先纠正核心错误：Dialog插件的导入路径错了 #

你之前从ckeditor5/src/ui导入Dialog完全不对——CKEditor5的Dialog是独立插件包，不属于ui模块。正确的导入路径是@ckeditor/ckeditor5-dialog，不是ckeditor5/src/ui。

一步步解决问题： #

1. 修正自定义插件的导入与依赖声明 #

修改你的自定义插件代码，把Dialog的导入和依赖改成这样：

// 保留原有的ui组件导入
import { ButtonView, ToolbarView } from 'ckeditor5/src/ui';
// 正确导入Dialog插件
import { Dialog } from '@ckeditor/ckeditor5-dialog';

class myplugin extends Plugin {
  static get requires() {
    // 在依赖数组里加入Dialog
    return [mypluginEditing, mypluginUI, Dialog];
  }

  // 你的其他插件逻辑代码...
}

2. 确保Drupal环境安装了Dialog插件包 #

如果你的Drupal用Composer管理依赖，直接执行命令安装Dialog插件包：

composer require ckeditor/ckeditor5-dialog

安装完成后记得清空Drupal缓存（drush cr或者后台手动清理）。

3. 在Drupal后台启用Dialog插件 #

1. 进入后台的配置 > 内容创作 > 文本格式和编辑器（路径/admin/config/content/formats）
2. 找到你使用CKEditor5的文本格式（比如「富文本」），点击「配置」
3. 往下翻到「编辑器配置」的「插件」区域，找到并勾选Dialog插件
4. 保存配置

4. 验证功能正常 #

现在再调用官方文档的Dialog代码就不会报错了：

editor.plugins.get( 'Dialog' ).show( {
  isModal: true,
  // 这里填你的对话框定义内容
} );

排查小技巧 #

• 如果后台看不到Dialog插件：先清缓存，再检查Composer是否真的安装了@ckeditor/ckeditor5-dialog包
• 如果构建还是报错：确认自定义插件的webpack配置能正确解析CKEditor5的包，或者直接用Drupal官方的CKEditor5构建工具打包你的自定义插件

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