咨询：CKEditor 5自定义插件是否无法实现对话框功能

CKEditor 5 完全支持在自定义插件中实现对话框功能，只是实现方式和 CKEditor 4 差异较大，不再使用CKEDITOR.dialog.add()这类旧API，而是基于其模块化的UI组件体系来构建。

以下是一个简单的实现示例，创建一个带对话框的自定义插件：

1. 导入必要模块 #

首先需要引入CKEditor 5核心插件类、UI组件以及对话框相关模块：

import { Plugin } from '@ckeditor/ckeditor5-core';
import { ButtonView } from '@ckeditor/ckeditor5-ui';
import { Dialog, DialogView } from '@ckeditor/ckeditor5-ui';

2. 编写自定义插件类 #

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

  init() {
    const editor = this.editor;

    // 注册触发对话框的按钮到编辑器UI
    editor.ui.componentFactory.add('customDialog', locale => {
      const button = new ButtonView(locale);

      button.set({
        label: '打开自定义对话框',
        withText: true,
        tooltip: true
      });

      // 按钮点击事件：打开对话框
      button.on('execute', () => {
        this._openCustomDialog(editor);
      });

      return button;
    });
  }

  // 自定义对话框逻辑
  _openCustomDialog(editor) {
    const locale = editor.locale;
    const dialogView = new DialogView(locale);

    // 配置对话框的标题、内容和按钮
    dialogView.set({
      title: '我的自定义对话框',
      content: [
        // 添加一个文本输入框
        {
          type: 'text',
          label: '请输入内容',
          value: ''
        }
      ],
      buttons: [
        {
          type: 'button',
          label: '确认',
          withText: true,
          onClick: () => {
            // 获取输入值并处理
            const inputValue = dialogView.content.getChildren()[0].value;
            console.log('用户输入:', inputValue);
            // 隐藏对话框
            dialogView.hide();
          }
        },
        {
          type: 'button',
          label: '取消',
          withText: true,
          onClick: () => {
            dialogView.hide();
          }
        }
      ]
    });

    // 创建Dialog实例并显示
    const dialog = new Dialog(editor);
    dialog.show(dialogView);
  }
}

补充说明 #

• 确保你的CKEditor 5构建包含@ckeditor/ckeditor5-ui包（自定义构建时需添加该依赖）。
• 对话框内容支持扩展，可以添加下拉框、复选框、甚至嵌套的UI组件，满足复杂交互需求。
• 也可以复用CKEditor 5内置的对话框逻辑，比如参考官方插件（如图片插入对话框）的实现方式来扩展。

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