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粘贴插件constWordPastePlugin=(editor)=>{editor.config.customPaste=(e)=>{consthtml=e.clipboardData.getData('text/html')if(html.includes('mso-style')){e.preventDefault()// 这里调用后端清洗Word HTMLaxios.post('/api/clean-word-html',{html}).then(res=>{editor.insertHtml(res.data.html)// 异步上传图片uploadImages(res.data.images)})}}document.addEventListener('paste',editor.config.customPaste)}// 图片上传函数asyncfunctionuploadImages(images){for(letimgofimages){constformData=newFormData()formData.append('file',img.blob)awaitaxios.post('/api/upload',formData)}}

后端部分

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

// 清洗Word HTMLfunctioncleanWordHtml($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])];}// 处理公式的玄学代码functionhandleEquations($html){// 1. 匹配Latex公式$html=preg_replace_callback('/\$([^$]+)\$/',function($matches){returnlatexToMathML($matches[1]);},$html);// 2. 处理MathType公式（这里我选择放弃治疗）$html=str_replace('