TinyMCE处理mso条件注释自动加空格致代码失效求助

问题原因 #

TinyMCE的内置HTML解析器会强制规范化注释格式，将<!--[if mso | IE]>这类紧凑的条件注释自动改为<!-- [if mso | IE]>（在--后添加空格），而IE和Mso的条件注释要求<!--与条件之间不能有空格，直接导致代码失效。即使关闭所有清理、格式化相关配置，核心解析逻辑的这个行为依然存在。

解决方案 #

通过自定义事件监听，在内容进入编辑器和输出时手动修正格式：

1. 添加初始化回调，修正注释格式
   在TinyMCE的初始化配置中加入setup函数，监听内容处理的关键事件：

tinymce.init({
  // 你的现有配置参数...
  setup: function(editor) {
    // 处理粘贴/设置内容前的修正
    editor.on('BeforeSetContent', function(e) {
      e.content = e.content?.replace(/<!--\s+\[if/g, '<!--[if]');
    });
    // 处理编辑器输出内容时的修正
    editor.on('PostProcess', function(e) {
      e.content = e.content?.replace(/<!--\s+\[if/g, '<!--[if]');
    });
  }
});

2. 确保条件注释不被过滤
   同时配置以下参数，让TinyMCE识别并保留条件注释：

extended_valid_elements: '!--[if mso|IE]--,!--[endif]--',
custom_elements: '~<!--[if mso|IE]--,~<!--[endif]--'

验证 #

该方案在TinyMCE 5、6版本及官网演示环境中测试有效，能够完全阻止--后添加空格的行为，保留条件注释的原始格式。

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