Word公式转网页MathML的完整实现方案

1. 项目背景与需求解析

在办公自动化场景中，我们经常遇到需要将Word文档中的数学公式迁移到网页富文本编辑器的情况。传统做法是手动重新输入公式或截图插入，效率低下且无法二次编辑。wangEditor作为一款轻量级Web富文本编辑器，原生并不支持Word公式的直接粘贴保留功能。

这个需求的核心痛点在于：Word使用OMML（Office Math Markup Language）存储公式，而网页需要呈现为MathML或LaTeX格式。两者语法结构差异巨大，需要一套完整的转换机制。我曾参与过某在线教育平台的文档迁移项目，每天要处理300+份含公式的Word讲义，深刻理解这个功能的实用价值。

2. 技术方案设计

2.1 整体处理流程

1. 剪贴板拦截：监听paste事件获取Word原始HTML
2. 公式提取：识别<m:oMath>标签内的OMML代码
3. 格式转换：OMML → MathML → LaTeX（可选）
4. 样式修复：处理Word自带的冗余样式
5. DOM插入：将处理后的内容插入编辑器

2.2 关键技术选型

• OMML解析：采用mammoth.js的扩展方案，其内置的OMML解析器能准确提取公式结构
• MathML生成：使用omml2mathml这个轻量级转换库（仅3.2KB）
• LaTeX转换（可选）：通过mathml-to-latex实现二次转换
• 样式清洗：正则表达式匹配删除style和class属性

重要提示：Word 2013+版本默认使用OMML存储公式，但Word 2007可能兼容MathML。实际开发中需要做版本检测。

3. 核心实现代码

3.1 剪贴板数据处理

javascript复制editor.config.onPaste = function (pasteHtml) {
  const doc = new DOMParser().parseFromString(pasteHtml, 'text/html')
  const oMathElements = doc.querySelectorAll('m\\:oMath')
  
  if (oMathElements.length > 0) {
    return processWordFormula(doc, pasteHtml)
  }
  return pasteHtml // 非Word公式内容直接返回
}

3.2 公式转换函数

javascript复制function processWordFormula(doc, originalHtml) {
  // 提取所有OMML公式节点
  const oMathNodes = Array.from(doc.querySelectorAll('m\\:oMath'))
  
  oMathNodes.forEach(node => {
    const oMathXml = node.outerHTML
    const mathML = omml2mathml.con