如何在Drupal 9的CKEditor 5表格属性中添加自定义选项

要实现这个需求，你需要通过自定义CKEditor 5插件扩展表格属性对话框，再配合Drupal的模块体系完成集成，具体步骤如下：

1. 创建自定义Drupal模块 #

先新建一个名为ckeditor5_table_responsive的模块，目录结构如下：

ckeditor5_table_responsive/
├── ckeditor5_table_responsive.info.yml
├── ckeditor5_table_responsive.libraries.yml
├── ckeditor5_table_responsive.ckeditor5.yml
├── js/
│   └── tableResponsive.js

1.1 填写模块信息文件（info.yml） #

name: CKEditor 5 Table Responsive
type: module
description: Adds responsive toggle option to CKEditor 5 table properties
core_version_requirement: ^9 || ^10
package: CKEditor
dependencies:
  - drupal:ckeditor5

1.2 配置库文件（libraries.yml） #

table_responsive:
  js:
    js/tableResponsive.js: {}
  dependencies:
    - ckeditor5/ckeditor5
    - drupal/ckeditor5

2. 编写CKEditor 5插件JavaScript代码 #

在js/tableResponsive.js里实现插件逻辑，扩展表格属性对话框的字段：

(function (Drupal) {
  Drupal.CKEditor5.plugins.add('tableResponsive', {
    requires: ['TableProperties'],

    init(editor) {
      const tablePropertiesForm = editor.plugins.get('TableProperties').form;

      // 添加响应式开关字段
      tablePropertiesForm.add({
        type: 'checkbox',
        label: Drupal.t('响应式：'),
        name: 'tableResponsive',
        defaultValue: false,
        // 读取已有表格的类，设置开关状态
        setup: function (widget) {
          this.value = widget.getAttribute('class')?.includes('table-responsive') ?? false;
        },
        // 提交时更新表格的类
        commit: function (widget) {
          const currentClasses = widget.getAttribute('class') || '';
          if (this.value) {
            widget.setAttribute('class', `${currentClasses} table-responsive`.trim());
          } else {
            widget.setAttribute('class', currentClasses.replace('table-responsive', '').trim());
          }
        }
      });
    }
  });
})(Drupal);

3. 注册插件到Drupal的CKEditor 5 #

在ckeditor5_table_responsive.ckeditor5.yml中配置插件信息：

tableResponsive:
  ckeditor5:
    plugins:
      - tableResponsive.tableResponsive
  drupal:
    label: '表格响应式开关'
    library: ckeditor5_table_responsive/table_responsive
    admin_library: ckeditor5_table_responsive/table_responsive
    elements:
      - <table class="table-responsive">

4. 配置CKEditor 5编辑器 #

1. 启用CKEditor 5 Table Responsive模块
2. 进入配置 > 内容创作 > 文本格式和编辑器，打开目标文本格式（如「富文本」）
3. 在「CKEditor 5插件」区域勾选「表格响应式开关」
4. 保存配置后，打开CKEditor 5的表格属性对话框，就能看到新增的「响应式」开关

5. 添加响应式表格的前端样式 #

在主题的CSS文件中添加适配样式：

.table-responsive {
  overflow-x: auto;
  display: block;
  width: 100%;
}

勾选「响应式」后，表格会自动添加table-responsive类，实现小屏幕下横向滚动的适配效果。

内容的提问来源于stack exchange，提问作者L.wadii