TinyMCE自动移除td内联样式及嵌套表格元素如何解决

问题表现 #

在邮件模板开发场景使用TinyMCE富文本编辑器，通过模板插件插入嵌套表格类模板代码时，会出现两类异常：

1. 第一层<td>标签上配置的background-color内联样式被自动删除，将背景色样式移到内层<table>标签上才可正常保留
2. 编辑器直接删除tr > td > table层级的嵌套结构，自动给原有div注入mce-content-body、contenteditable="true"等编辑器自带属性，篡改原始模板结构

原始插入的模板代码片段：

<tr>
   <td>
    <div class="content">
     <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
      <tr>
        <td align="center"  style="font-size:0;background-color: #23004C;">
            <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;font-size:0;line-height:0;">
                <tr>
                    <td align="left" valign="top" dir="rtl">

被编辑器篡改后的输出代码：

<tr>
     <td>
       <div class="content mce-content-body" id="mce_3" contenteditable="true" spellcheck="false">
         <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; font-size: 0; line-height: 0;" data-mce-style="width: 100%; font-size: 0; line-height: 0;" class="mce-item-table">
            <tbody>
                <tr>
                    <td align="left" valign="top" dir="rtl">

需求为不批量修改现有模板，此前尝试在tr、td标签添加class="mceTmpl"属性未生效，需要通过配置让td等元素正常保留background-color等CSS属性，同时保留原有嵌套结构。

修复配置 #

直接修改TinyMCE初始化参数即可，不需要改动存量模板代码：

• 放开元素与样式白名单，关闭HTML结构强制校验

tinymce.init({
  // 其余原有配置保持不变
  // 放开嵌套表格的合法子元素限制，允许td下直接嵌套div、table
  valid_children: '+td[div|table],+tr[td],+table[tbody|tr|td]',
  // 关闭HTML结构自动校验修正，避免编辑器删除不符合默认schema的嵌套结构
  verify_html: false,
  schema: 'html5',
  // 放开所有相关元素的内联样式限制，不再过滤background-color等样式
  valid_styles: {
    '*': 'all'
  },
  // 放开td、table、tr、div的所有属性限制，不自动过滤自定义属性、类名、内联样式
  extended_valid_elements: 'td[*],table[*],tr[*],div[*]',
  // 关闭表格自动修复逻辑：禁止自动补全tbody、删除空td、修正表格嵌套
  fix_table_elements: false,
  // 禁止编辑器自动给模板内元素注入mce-开头的类名、contenteditable等属性
  noneditable_noneditable_class: 'mceNonEditable',
  template_cdate_classes: 'mceTmpl',
  // 关闭内联边界自动识别，避免把模板内的div识别为编辑区容器自动注入属性
  inline_boundaries: false
})

• 模板插入逻辑调整：不需要给tr、td加mceTmpl类，只需要给每次插入的整段模板片段的最外层包裹元素加上mceNonEditable类，编辑器就不会递归清洗该片段内部的结构和样式。
• 此前mceTmpl不生效的原因是该类仅为模板插件的内容标记类，本身不会绕过编辑器的HTML清洗逻辑，必须配合verify_html: false参数使用才会生效。

注意：verify_html: false会关闭前端富文本自带的HTML标签过滤，若有XSS防护需求，请在内容提交时通过后端做统一过滤，不要依赖前端编辑器的校验能力。

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