xhEditor导入Latex公式生成MathML

山西前端打工人的CMS改造历险记

大家好，我是山西某不知名前端码农，最近接了个企业官网CMS的外包单子。客户爸爸提出了个"简单"需求——要在文章编辑器里加个Word一键粘贴功能。听起来简单？呵呵，让我这个月薪3000的码农给你讲讲这680块预算的奇幻漂流…

客户需求の迷之操作

客户要求：

1. 支持Word/Excel/PPT/PDF导入（您这是要搞Office全家桶啊）
2. 保留所有花里胡哨的格式（包括那些我都没见过的公式）
3. 支持从微信公众号复制（微信：你礼貌吗？）
4. 图片自动上传服务器（我服务器都快炸了）
5. 预算680块（老板您这是要我的命啊）

最骚的是——客户说这是为了方便高龄用户！合着咱们高龄用户都是Word高手呗？

技术选型の痛苦面具

前端部分

我用的Vue3 + xhEditor，这xhEditor年纪比我爷爷都大。找了一圈发现https://www.tiny.cloud/的付费版能搞定，但680块怕是连人家一个按钮都买不起。

最后我决定用https://www.wangeditor.com/ + 自制插件，下面是我的骚操作：

// wangEditor Word粘贴插件
const WordPastePlugin = (editor) => {
  editor.config.customPaste = (e) => {
    const html = e.clipboardData.getData('text/html')
    if (html.includes('mso-style')) {
      e.preventDefault()
      // 这里调用后端清洗Word HTML
      axios.post('/api/clean-word-html', { html })
        .then(res => {
          editor.insertHtml(res.data.html)
          // 异步上传图片
          uploadImages(res.data.images)
        })
    }
  }
  document.addEventListener('paste', editor.config.customPaste)
}

// 图片上传函数
async function uploadImages(images) {
  for (let img of images) {
    const formData = new FormData()
    formData.append('file', img.blob)
    await axios.post('/api/upload', formData)
  }
}

后端部分

客户说后端随便，我果断选了PHP（因为便宜啊！）。下面是处理Word HTML的骚代码：

// 清洗Word HTML
function cleanWordHtml($html) {
    // 1. 提取所有图片
    preg_match_all('/]+>/i', $html, $images);
    
    // 2. 替换MS Office特有样式
    $html = preg_replace('/class="Mso[^"]+"/', '', $html);
    $html = str_replace('mso-', '', $html);
    
    // 3. 处理公式（这里是个大坑）
    $html = handleEquations($html);
    
    return [
        'html' => $html,
        'images' => extractImages($images[0])
    ];
}

// 处理公式的玄学代码
function handleEquations($html) {
    // 1. 匹配Latex公式
    $html = preg_replace_callback('/\$([^$]+)\$/', function($matches) {
        return latexToMathML($matches[1]);
    }, $html);
    
    // 2. 处理MathType公式（这里我选择放弃治疗）
    $html = str_replace('