如何在CKEditor5配置中为table元素添加自定义class？

你此前尝试的三种配置写法均不符合CKEditor5原生配置规范，无法生效，以下是两种可直接落地的实现方案：

方案一：使用TableProperties插件配置默认属性（推荐） #

如果你的项目已经集成了@ckeditor/ckeditor5-table包下的TableProperties特性（大部分官方预设构建默认包含该特性），直接配置表格默认属性即可，同时需要配置HTML支持规则避免自定义class被编辑器过滤：

ckeditorConfigRegistry.add(config => ({
  toolbar: [...config.toolbar, 'fontColor', 'fontBackgroundColor'],
  table: {
    tableProperties: {
      defaultProperties: {
        class: 'table table-bordered'
      }
    }
  },
  // 配置HTML支持规则，允许table元素携带指定class
  htmlSupport: {
    allow: [
      {
        name: 'table',
        classes: ['table', 'table-bordered']
      }
    ]
  }
}));

方案二：自定义转换插件（兼容性最高） #

如果不想依赖TableProperties特性，可以通过编写轻量自定义插件修改表格的输出逻辑，所有编辑器内插入的表格都会自动带上指定class：

import { Plugin } from 'ckeditor5/src/core';

// 自定义插件：给所有输出的table元素加指定class
class AddDefaultTableClass extends Plugin {
  init() {
    const editor = this.editor;
    editor.conversion.for('downcast').add(dispatcher => {
      dispatcher.on('insert:table', (evt, data, conversionApi) => {
        const viewElement = conversionApi.mapper.toViewElement(data.item);
        conversionApi.writer.addClass(['table', 'table-bordered'], viewElement);
      });
    });
  }
}

// 把自定义插件加到编辑器配置
ckeditorConfigRegistry.add(config => ({
  toolbar: [...config.toolbar, 'fontColor', 'fontBackgroundColor'],
  extraPlugins: [...(config.extraPlugins || []), AddDefaultTableClass]
}));

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