如何通过脚本优化CKEditor生成冗余span标签的输出代码

一、前置配置：从生成源头减少冗余Span输出 #

• 调整CKEditor核心配置，拦截冗余span的自动生成逻辑
  • 开启粘贴内容自动清洗：设置config.pasteFromWordRemoveStyles = true、config.pasteRemoveStyles = true，自动过滤从Word、外部页面粘贴时带进来的嵌套分散span
  • 启用严格内容规则：配置config.allowedContent明确允许保留的标签、样式范围，禁止编辑器在连续同样式文本上拆分生成独立span
  • 自定义精简样式集合：替换默认的styleSet配置，强制编辑器将连续的同属性（同色、同字号）文本合并到单个span块中，避免每一次样式调整都新建独立span

二、输出层脚本清洗：精简已生成的冗余代码 #

如果已经存在大量历史冗余span内容，可以通过前端脚本在内容提交前、页面渲染时统一清洗，清洗逻辑覆盖4类核心冗余场景：

• 移除无任何有效属性的空span
• 合并相邻的、样式/类名完全一致的连续span
• 展平和外层样式完全相同的嵌套span
• 移除和父级计算样式完全重复的无效内联样式

对应的可直接复用的清洗脚本：

function cleanRedundantSpans(editorHtml) {
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = editorHtml;
  let scanFlag = true;

  // 循环扫描直到没有可清理的节点
  while (scanFlag) {
    scanFlag = false;
    // 清理无属性空span
    tempContainer.querySelectorAll('span:not([style]):not([class])').forEach(emptySpan => {
      emptySpan.replaceWith(...emptySpan.childNodes);
      scanFlag = true;
    });

    // 合并相邻同属性span
    tempContainer.querySelectorAll('span').forEach(currentSpan => {
      let nextNode = currentSpan.nextSibling;
      // 跳过相邻的纯空白文本节点（换行、无意义空格）
      while (nextNode && nextNode.nodeType === Node.TEXT_NODE && !nextNode.textContent.trim()) {
        nextNode = nextNode.nextSibling;
      }
      if (
        nextNode?.tagName === 'SPAN' &&
        currentSpan.getAttribute('style') === nextNode.getAttribute('style') &&
        currentSpan.getAttribute('class') === nextNode.getAttribute('class')
      ) {
        currentSpan.append(...nextNode.childNodes);
        nextNode.remove();
        scanFlag = true;
      }
    });

    // 展平嵌套同属性span
    tempContainer.querySelectorAll('span > span').forEach(innerSpan => {
      const outerSpan = innerSpan.parentElement;
      if (innerSpan.getAttribute('style') === outerSpan.getAttribute('style')) {
        outerSpan.replaceWith(...innerSpan.childNodes);
        scanFlag = true;
      }
    });
  }

  // 清理span上的冗余无效样式
  tempContainer.querySelectorAll('span[style]').forEach(span => {
    const computedStyle = window.getComputedStyle(span);
    const validStyleList = span.getAttribute('style')
      .split(';')
      .map(item => item.trim())
      .filter(item => item)
      .filter(styleItem => {
        const [prop, value] = styleItem.split(':').map(s => s.trim());
        // 仅保留和实际计算结果不一致的差异化样式
        return computedStyle[prop] !== value;
      });
    if (validStyleList.length) {
      span.setAttribute('style', validStyleList.join(';'));
    } else {
      span.replaceWith(...span.childNodes);
    }
  });

  return tempContainer.innerHTML;
}

脚本接入注意事项 #

• 不要无差别删除所有span标签，仅清理无有效视觉差异的冗余块，避免误删用户特意设置的格式
• 合并相邻节点时必须跳过无意义的空白文本，防止破坏原有排版的段间距、字间距
• 必须保留循环扫描机制，因为合并、展平操作会产生新的可清理节点，单次扫描无法完成全部精简

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