Angular项目中CKEditor 5表格工具栏无法显示Cell Properties怎么办

开发者阿泽

2026-10-22

CKEditor 5 Angular项目表格Cell Properties功能不显示解决方案

问题原因

你配置的tableCellProperties工具栏项对应的TableCellProperties插件不属于默认ClassicEditor预编译包的内置插件，因此即便在contentToolbar中添加了对应配置，也不会渲染对应的功能入口，官方基础文档的表格配置项仅列出三个默认支持项也是这个原因。

解决步骤

有两种可选方案，按需选择即可：

方案1：使用自定义构建的CKEditor 5

进入CKEditor 5在线构建页面，在插件选择列表的表格分类下勾选TableCellProperties（如果需要表格全局属性配置可同时勾选TableProperties），完成其余配置后导出构建好的编辑器包
将自定义构建的编辑器包替换项目中当前引用的ClassicEditor，你现有的contentToolbar配置即可直接生效，点击表格单元格后就能在上下文工具栏看到Cell Properties选项

方案2：在现有ClassicEditor基础上额外注册插件

如果你不想自定义编辑器构建，可以手动安装并注册对应插件：

安装表格插件依赖，注意要和你项目中当前CKEditor的版本完全一致：

npm install @ckeditor/ckeditor5-table@你的CKEditor版本号

在你的业务TS文件中导入插件：

import { TableCellProperties } from '@ckeditor/ckeditor5-table';
// 若需要表格全局属性，额外导入 import { TableProperties } from '@ckeditor/ckeditor5-table';

修改配置，注册插件到编辑器：

Editor = ClassicEditor;
ckeditorConfig = {
  // 新增plugins配置项注册导入的插件
  plugins: [ TableCellProperties ],
  // 若导入了TableProperties，要加到plugins数组里
  toolbar: [ 'heading', '|', 'bold', 'italic', 'insertTable' ],
  table: {
    contentToolbar: [ 
      'tableRow', 
      'tableColumn', 
      'mergeTableCells', 
      'tableCellProperties'
      // 若需要表格全局属性，这里加 'tableProperties'
    ]
  }
}