CKEditor 4.17粘贴Word内容残留无效标签及样式配置问题

以下方案针对CKEditor 4.17稳定版，不适用于CKEditor 5.x版本线。

核心问题解答 #

1. 带calibri/arial属性的span是否属于应被移除的字体样式范畴 #

是。这类标签完全属于pasteFromWordRemoveFontStyles配置的法定清理目标，残留属于Paste from Word插件内置清理逻辑的已知bug，并非配置不生效。

2. 无效标签和异常注释的产生原因 #

• 畸形span标签：Word复制到剪贴板的源HTML本身不符合W3C规范，会把部分字体声明直接以「字体名作为属性名」的形式写在span标签上，而非写入标准的style="font-family:xxx"属性。CKEditor 4.17版本的粘贴字体清理逻辑，仅匹配了style属性内的font-family规则，没有覆盖这类畸形属性结构，清理时只删掉了style里的字体声明，留下了多层嵌套的空属性span壳子。4.1版本不存在该问题，是因为当时的粘贴解析逻辑还未适配新版Word生成的HTML结构，不会触发这类解析bug。
• 破碎条件注释：这类<!--[if-->片段是Word为兼容旧版IE生成的Office专属条件注释，本身没有任何现代浏览器可识别的渲染作用。CKEditor 4.17的注释清理规则没有覆盖这类被转义、拆分的破碎注释片段，导致其直接残留在输出内容中。

3. 稳定修复方案 #

不要单独依赖pasteFromWordRemoveFontStyles单条配置，结合编辑器的paste事件做自定义后置清理，完全不受插件内置bug影响：

• 正则匹配所有Word生成的条件注释片段，这类内容无任何实际渲染作用，直接删除即可。
• 遍历粘贴内容中的span标签，移除所有仅携带字体名属性、无有效style/class/标准属性的无效span，保留标签内部的文本和有效内容，剥掉嵌套的冗余标签壳。

附加问题解答 #

开启pasteFromWordRemoveFontStyles = true后保留字体颜色的方法：
pasteFromWordRemoveFontStyles本身的设计逻辑是仅移除font-family、font-size、font-weight这类字体排版相关样式，默认不会删除color字体颜色样式。如果出现颜色被误删的情况，通常是两个原因：

• 误开启了config.pasteFromWordRemoveStyles = true配置，该配置会全量移除所有内联样式，直接关闭即可。
• 高级内容过滤器（ACF）默认规则拦截了color样式，通过extraAllowedContent明确放行规则即可，不需要在清理逻辑执行后单独做后置放行。

可直接复用的配置代码 #

// 直接写入CKEditor编辑器实例化配置项即可生效
config.pasteFromWordRemoveFontStyles = true;
config.extraAllowedContent = 'span{color}';
config.on = {
  paste: function(evt) {
    let content = evt.data.dataValue;
    // 清理所有Word残留的条件注释碎片
    content = content.replace(/<!--\s*\[?(if|endif|!\[if|!\[endif)\s*[^>]*-->/gi, '');
    // 清理带字体名属性的无效span，可根据业务使用的字体扩展选择器
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = content;
    const invalidSpanList = tempContainer.querySelectorAll('span[calibri], span[arial], span[simhei], span[simsun], span[microsoftyahei]');
    invalidSpanList.forEach(span => {
      const parentNode = span.parentNode;
      // 将span内的有效内容移到父节点，移除无效span壳
      while (span.firstChild) {
        parentNode.insertBefore(span.firstChild, span);
      }
      parentNode.removeChild(span);
    });
    evt.data.dataValue = tempContainer.innerHTML;
  }
};

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