Angular中CKEditor5加载后端模板时表格样式丢失问题

针对Angular项目中使用CKEditor5加载后端HTML模板时出现的表格被自动包裹<figure>、样式被移除，且提交HTML结构与原始不一致的问题，可通过以下配置解决：

1. 关闭表格自动包裹figure的默认行为 #

CKEditor5的Table插件默认会将表格包裹在<figure class="table">标签内，只需在编辑器配置中禁用该行为：

public editorConfig: CKEditor5.Config = {
  // ...其他配置
  table: {
    wrapTable: false
  }
};

2. 配置HTML Support插件保留表格样式与属性 #

利用@ckeditor/ckeditor5-html-support插件，明确允许表格相关标签保留自定义类、内联样式及属性，避免编辑器自动清理：

public editorConfig: CKEditor5.Config = {
  plugins: [
    'Table',
    'TableToolbar',
    'HtmlSupport',
    // 其他你需要的插件（如Bold、Italic等）
  ],
  // ...工具栏配置
  htmlSupport: {
    allow: [
      {
        name: 'table',
        attributes: true, // 允许所有属性，也可指定具体属性如['class', 'id']
        styles: true      // 保留内联样式
      },
      {
        name: 'tr',
        attributes: true,
        styles: true
      },
      {
        name: 'td',
        attributes: true,
        styles: true
      },
      {
        name: 'th',
        attributes: true,
        styles: true
      }
    ]
  }
};

注意事项 #

• 确保已正确安装并导入所有依赖插件，若使用自定义编辑器构建，需在构建时包含Table、HtmlSupport等插件；
• 若有其他自定义标签或属性需要保留，可在htmlSupport.allow数组中添加对应规则。

内容的提问来源于stack exchange，提问作者saajan-pixel