能否让CKEditor的editor.getData()返回带内联样式的内容？

问题核心 #

CKEditor插入表格后，editor.getData()返回的内容会用<figure class="table">包裹<table>，但Outlook邮件需要直接输出带内联样式的<table>标签，否则邮件渲染会出现异常。

具体解决方案 #

1. 修改CKEditor配置，禁用表格的figure包裹（CKEditor 5） #

在编辑器初始化时，通过修改schema和转换器，让表格直接作为顶级元素输出：

ClassicEditor
  .create( document.querySelector( '#editor' ), {
    // 其他原有配置
  } )
  .then( editor => {
    // 允许table作为根元素的子元素
    editor.model.schema.register( 'table', {
      allowWhere: '$block',
      allowContentOf: '$root'
    } );

    // 覆盖默认转换逻辑，直接输出带样式的table标签
    editor.conversion.for( 'dataDowncast' ).elementToElement( {
      model: 'table',
      view: ( modelElement, { writer } ) => {
        return writer.createContainerElement( 'table', {
          style: 'border: 1px solid #000; border-collapse: collapse;'
        } );
      }
    } );

    // 移除默认的figure包裹转换
    editor.conversion.for( 'dataDowncast' ).remove( 'tableWrapper' );
  } )
  .catch( error => {
    console.error( error );
  } );

2. 手动处理HTML输出（通用方案） #

如果编辑器配置修改无效，直接在获取内容后做字符串替换，去掉figure包裹并添加Outlook兼容的内联样式：

let editorContent = editor.getData();

// 移除包裹table的figure标签
editorContent = editorContent.replace( /<figure class="table">(.*?)<\/figure>/gs, '$1' );

// 给table添加基础内联样式
editorContent = editorContent.replace( /<table>/g, '<table style="border: 1px solid #000; border-collapse: collapse;">' );

// 给表格单元格添加边框和内边距（Outlook必须）
editorContent = editorContent.replace( /<td>/g, '<td style="border: 1px solid #000; padding: 4px 8px;">' );
editorContent = editorContent.replace( /<th>/g, '<th style="border: 1px solid #000; padding: 4px 8px; background-color: #f0f0f0;">' );

3. Outlook兼容额外注意事项 #

• 强制用内联样式：Outlook不支持<style>标签内的样式，所有样式必须直接写在元素的style属性中。
• 边框要全覆盖：仅给table加边框无效，需给每个td和th单独设置边框，配合border-collapse: collapse;确保边框显示正常。
• 简化布局逻辑：Outlook对CSS布局支持有限，复杂布局尽量用表格嵌套实现，避免使用flex、grid等现代布局方式。

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