如何过滤TinyMCE中粘贴的含data-contrast等属性的冗余span代码？

针对从SharePoint或非桌面端Word粘贴到TinyMCE时出现的带data-ccp-props、data-contrast属性的冗余span标签，以下是几个有效的过滤方案：

1. 自定义粘贴前预处理逻辑 #

利用TinyMCE的paste_preprocess事件，在内容插入编辑器前直接修改粘贴的HTML内容，针对性清理冗余代码。这是最精准的方案，能保留有用格式的同时移除冗余标签/属性：

tinymce.init({
  // 你的其他编辑器配置
  setup: function(editor) {
    editor.on('paste_preprocess', function(e) {
      // 方案A：直接移除带目标属性的span标签，保留内部文本
      e.content = e.content.replace(/<span[^>]*data-ccp-props="[^"]*"[^>]*>(.*?)<\/span>/gi, '$1');
      e.content = e.content.replace(/<span[^>]*data-contrast="[^"]*"[^>]*>(.*?)<\/span>/gi, '$1');

      // 方案B：保留span标签，但移除冗余属性（适合需要保留span样式的场景）
      // e.content = e.content.replace(/(<span[^>]*)(data-ccp-props="[^"]*"|data-contrast="[^"]*")([^>]*>)/gi, '$1$3');
    });
  },
  // 配合基础粘贴过滤配置
  paste_enable_default_filters: true,
  paste_remove_styles: true,
  paste_strip_class_attributes: 'all'
});

2. 全局内容过滤器 #

注册自定义内容过滤器，不仅在粘贴时生效，还会在编辑器内容初始化、编辑过程中自动清理冗余代码，适合需要全局维护清洁HTML的场景：

tinymce.init({
  // 你的其他编辑器配置
  content_filters: [
    function(content) {
      // 移除目标冗余属性
      content = content.replace(/(<span[^>]*)(data-ccp-props="[^"]*"|data-contrast="[^"]*")([^>]*>)/gi, '$1$3');
      // 清理空span标签（属性移除后可能出现空标签）
      content = content.replace(/<span[^>]*><\/span>/gi, '');
      return content;
    }
  ],
  paste_auto_cleanup_on_paste: true
});

3. 强制纯文本粘贴（按需使用） #

如果业务场景允许丢失原有格式，直接开启纯文本粘贴模式，彻底规避所有HTML冗余代码：

tinymce.init({
  // 你的其他编辑器配置
  paste_as_text: true
});

4. 排查CMS全局配置覆盖问题 #

如果之前修改TinyMCE设置未生效，大概率是CMS集成时的全局配置覆盖了你的局部设置。需要找到CMS后台中TinyMCE的全局配置文件（或后台配置面板），将上述过滤逻辑添加到全局初始化代码中，确保配置生效。

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