求助：TinyMCE 5加载HTML时移除重复内联样式值如何保留全部

TinyMCE默认会遵循CSS规范清理重复的内联样式属性，同时浏览器DOM解析器也会自动合并重复属性，导致你的重复样式被移除。要实现保留重复样式的需求，可以通过以下配置和自定义逻辑解决：

核心配置调整 #

首先关闭编辑器的HTML清理和验证功能，避免自动移除重复属性：

tinymce.init({
  selector: '#your-editor-id',
  // 关闭自动HTML清理
  cleanup: false,
  // 关闭HTML验证
  verify_html: false,
  // 允许所有元素保留style属性
  extended_valid_elements: '*[style]'
});

自定义样式解析与序列化逻辑 #

由于编辑器默认的样式解析会合并重复属性，需要重写parseStyle和serializeStyle方法，让它们保留并输出重复的样式声明：

tinymce.init({
  // 上述核心配置...
  setup: function(editor) {
    // 重写样式解析方法，将重复属性存储为数组
    editor.dom.parseStyle = function(cssText) {
      const styleMap = {};
      if (!cssText) return styleMap;

      cssText.split(';').forEach(rule => {
        rule = rule.trim();
        if (!rule) return;

        const [prop, value] = rule.split(':').map(item => item.trim());
        if (!prop || !value) return;

        if (styleMap[prop]) {
          // 已有属性则转为数组存储多个值
          styleMap[prop] = Array.isArray(styleMap[prop]) 
            ? [...styleMap[prop], value] 
            : [styleMap[prop], value];
        } else {
          styleMap[prop] = value;
        }
      });
      return styleMap;
    };

    // 重写样式序列化方法，将数组格式的属性转为重复的CSS声明
    const originalSerialize = editor.dom.serializeStyle;
    editor.dom.serializeStyle = function(styleObj) {
      if (!styleObj) return '';

      let cssText = '';
      Object.keys(styleObj).forEach(prop => {
        const values = Array.isArray(styleObj[prop]) ? styleObj[prop] : [styleObj[prop]];
        values.forEach(value => {
          cssText += `${prop}: ${value}; `;
        });
      });
      return cssText.trim();
    };
  }
});

加载HTML时的注意事项 #

设置编辑器内容时，使用raw格式选项，绕过编辑器的内容预处理，确保原始HTML直接被加载：

editor.setContent('<div style="width: calc(100%-10px); width:10px;">Test Content</div>', { format: 'raw' });

注意事项 #

• 关闭cleanup和verify_html会降低编辑器的XSS防护能力，如果你的编辑器加载的是不可信用户内容，需要自行添加XSS过滤逻辑。
• 这种处理方式不符合标准CSS规范，仅适用于你的特殊业务场景。

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