1. 问题背景:从Word复制公式到帝国CMS 7.5的“变形计”
做了几年帝国CMS 7.5的模板开发和内容维护,被问得最多的一个细节问题就是:网页编辑器里粘贴Word文档内容,文字、表格都还好,只要碰到数学公式,几乎必出幺蛾子。要么粘贴后变成一串乱码,要么只剩一个红叉,要么显示出一段看不懂的域代码,更有甚者直接变成一张模糊小图,前端页面完全没法看。
这个问题不是帝国CMS独有的,而是“Word公式在剪贴板中的特殊格式”与“网页编辑器接收机制”之间的矛盾。搞清楚这个矛盾,再对症下药,基本能解决95%以上的公式粘贴需求。这篇文章主要面向帝国CMS 7.5后台的内容编辑、网站维护者和二次开发人员,也会给出通用的处理思路,其他CMS同样可以参考。
在开始之前,先统一说法:帝国CMS 7.5的后台默认网页编辑器是eWebEditor,后台设置里也能调成其他编辑器,但大多数老站还在用默认这一套。下文提到的“编辑器”指的就是这个富文本编辑区。文章里所有方案,我都按“先分析原理,再给操作步骤”的方式来写,这样即使你的编辑器版本和我演示的不完全一样,也能举一反三。
1.1 为什么会粘贴失败?
很多人第一反应是“帝国CMS编辑器太弱”,实际上这个锅不能全让CMS背。Word文档中的公式,在复制到剪贴板时,携带的信息远不止你肉眼看到的“公式形状”。如果你在Word里复制一个公式,然后粘贴到系统自带的“记事本”里,大概率什么都粘贴不出来,或者变成一串类似“{EMBED Equation.DSMT4}”的文本。这说明公式本身不是普通文本,而是以对象方式嵌入Word的。
网页编辑器是HTML环境,它只能理解HTML标签、纯文本、图片地址这样的内容。当它接收Ctrl+V时,浏览器会先看剪贴板里有没有HTML格式数据;如果有,就把HTML转成可编辑DOM;如果没有,再看纯文本。Word复制出来的公式,剪贴板里既有OLE对象格式,也有图片格式,还有一小部分HTML元数据,但HTML里通常不包含公式的原生结构。于是编辑器要么丢弃它,要么把OLE对象转换成一段不可读的占位符,要么干脆显示成乱码。
1.2 常见的四种粘贴结果和原因分析
根据我实际接触过的几十个站点,从Word复制公式到帝国CMS 7.5编辑器,无非下面四种情况:
| 粘贴结果 | 可能原因 | 严重程度 |
|---|---|---|
| 公式变成一张图片,但清晰度很差 | 剪贴板中的图片格式被编辑器接收,但Word导出的公式位图分辨率较低 | 中 |
| 公式变成“红叉”或空白框 | 编辑器尝试显示OLE对象或WMF格式图片,但浏览器不支持 | 高 |
| 公式变成“{EMBED Equation.DSMT4}”之类的代码 | 剪贴板中的纯文本内容被编辑器保留,域代码暴露 | 高 |
| 粘贴后什么都没发生 | 编辑器过滤规则将未知格式全部拦截 | 中 |
如果你遇到的是前三种,说明剪贴板里“非HTML”内容占了主导。与其期待编辑器自动识别,不如换一种入口,主动把公式转成网页能稳定展示的形态——目前最稳定、性价比最高的两条路,一条是“LaTeX代码”,另一条是“高清图片”。
2. 核心思路:先搞清楚公式在剪贴板里的真实身份
Word公式的复制不是简单的“选中有字字符”,它背后至少存在三种完全不同的数据形态。理解这三种形态,是解决粘贴问题的钥匙。
2.1 Word公式的三种存储形态
Word中的公式分为三类。
第一类是“公式编辑器3.0”生成的OLE对象,这类公式在Word里双击会启动MathType或Microsoft公式编辑器,复制后剪贴板里会包含OLE对象、位图、增强型图元文件(EMF)等格式。这类公式历史最悠久,老文档里最常见。
第二类是Word 2007以后自带的“原生公式”,使用UnicodeMath或线性格式存储。这类公式复制后,剪贴板中的HTML片段里其实会带有MathML或类似代码,但浏览器和编辑器对MathML的支持并不统一,帝国CMS 7.5默认编辑器对MathML更是几乎无感。
第三类是MathType创建的“OLE公式”。MathType在Word里安装后,它生成的公式也是OLE对象,但MathType在复制时可以向剪贴板额外写入一段LaTeX文本。这一点非常关键,后面会用到。
2.2 编辑器到底能接收什么?
富文本编辑器接收粘贴内容的核心机制,是浏览器执行“paste事件”时读取“text/html”和“text/plain”两种数据类型,并尝试把text/html插入到编辑区DOM树中。如果你的剪贴板里没有text/html,只有image/png或application/x-msword之类的格式,编辑器往往只能做两种情况:要么忽略,要么把未知对象转成一个空的占位元素。
帝国CMS 7.5默认编辑器有自己的粘贴处理逻辑,尤其会调用“Word粘贴处理”函数,对来自Word的HTML进行清理。清理规则会过滤掉很多Word特有的标签,例如<![if !supportLists]>、<o:p>,同时也会丢弃OLE嵌入对象。公式作为“嵌入对象”,如果不在允许列表里,就会被删掉或替换成空白。
2.3 推荐的技术路线选择
既然剪贴板形态不可控,那我们就主动控制粘贴源。我的建议是,按使用场景选择三条路线:
如果你只需要偶尔发布几篇带公式的文章,用“MathType复制LaTeX + 前端MathJax渲染”的方案,公式质量最高,维护也方便。
如果你的网站没有加载任何数学渲染库,也不想改模板,那就用“Word公式转高清图片 + 帝国CMS附件上传”的方案,简单粗暴,稳定可靠。
如果你有大量老文章需要从Word搬迁,且这些文章里的公式特别多,建议用批量转换工具先把整个Word文档里的公式统一导出为图片或LaTeX,再通过帝国CMS的批量导入功能入库,不要一篇篇复制粘贴。
三条路线不冲突,甚至可以混合使用:日常短文章用LaTeX,临时通告用图片,整站迁移用批量处理。
3. 实操方案一:用MathType中转,走“LaTeX代码”路线
这条路线是我个人最喜欢的方式,因为LaTeX公式体积小、清晰度高、便于后期修改。前提是电脑上安装了MathType,并且你的站点支持在前端渲染LaTeX。
3.1 MathType将Word公式转成LaTeX的步骤
打开Word文档,双击任意一个公式,会进入MathType编辑窗口。此时不要改动内容,直接执行“预置”菜单下的“剪切和复制预置”,勾选“复制为LaTeX”选项,同时将“针对此应用程序的转换”设置为“TeX语法”。
设置完成后,回到Word中,选中目标公式,按Ctrl+C复制。此时剪贴板中就已经包含了该公式的LaTeX代码。为了验证,可以在桌面新建一个文本文件,Ctrl+V粘贴,你会看到类似“$$ x^2 + y^2 = z^2 $$”的内容。
这里有个细节:MathType复制LaTeX时,默认会带$$左右包裹。如果只是在行内插入,用$...$或\(...\)更合适。可以在MathType的剪切复制预置里把“Include TeX delimiters”选项改成“None”,复制后得到的代码就是纯LaTeX命令,再由自己手动添加定界符。
3.2 在帝国CMS后台粘贴LaTeX代码(源码模式)
进入帝国CMS 7.5后台,新建或编辑文章。在编辑器工具栏找到“源码”或“HTML源码”按钮,点击后将编辑区切换到源码模式。将刚才复制到的LaTeX代码粘贴进去。
举个例子,如果公式是一个二次方程求根公式,MathType复制出来可能是:
$$x = \frac{-b \pm \sqrt{b^{2}-4ac}}{2a}$$在源码模式下,这段内容会被存到文章数据表中。不过在普通浏览状态下,它仍然显示为一大段源码,需要借助前端渲染库才能变成真正的公式。
3.3 配合MathJax在前端渲染公式
前端渲染方案很多,我用得最熟练的是MathJax。在帝国CMS 7.5模板的_head.htm中引入MathJax的CDN脚本:
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>然后添加一行配置:
<script> MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$', '$$'], ['\\[', '\\]']] }, svg: { fontCache: 'global' } }; </script>引入后,MathJax会自动扫描页面中的LaTeX定界符进行渲染。由于帝国CMS是PHP+模板模式,每篇文章发布后生成静态HTML,MathJax在页面加载时动态渲染,所以不需要额外修改数据存储结构,也不用担心缓存问题。
这个方法有个需要适应的地方:MathJax是在用户浏览器里执行的,如果文章页是生成静态HTML,那么公式源码会原样出现在页面源代码中,等JavaScript加载后才会变成好看的公式形状。搜索引擎抓取时抓到的仍然是LaTeX源码,这对数学类网站来说其实更利于收录关键词,但如果你希望首屏就能看到公式,建议配合“服务端渲染”或“预加载脚本”优化。
3.4 注意事项:为什么不要直接贴图片
很多新手会问:为什么不直接使用MathType复制公式,然后在Word里粘贴成图片,再把图片传上去?这当然可以,但我建议不要作为首选。图片公式至少有四个问题:一是缩放后边缘发虚,尤其在高分辨率屏幕上特别明显;二是无法被搜索收录;三是不方便后期修改,只要改一个符号就得重新生成整张图片;四是增加网站存储和带宽压力。LaTeX方案只需要几行文本,效果却是矢量级别的,页面上无论放大多少倍都保持清晰。
4. 实操方案二:利用Word自带的“转换为图片”能力
如果前端不好加MathJax,或者网站本身是纯静态展示类站点,那么把公式转成图片再上传,是兼容性最高的方案。下面以Office 2016以上版本为例。
4.1 一次性批量转换Word公式为图片
如果你只有少数几个公式,可以直接在Word中选中公式,按Ctrl+C,然后打开画图工具,Ctrl+V粘贴,保存为PNG。这个操作我试过,缺点是图片质量取决于Word绘制公式时的DPI,通常只有96dpi,放大后会模糊。
更好的办法是利用Word自带的“选择性粘贴”。复制公式后,在Word的另一个位置执行“开始—粘贴—选择性粘贴”,选择“图片(增强型图元文件)”,就可以把公式变成矢量图对象。但EMF格式不能直接放在网页上使用,需要再借助转换工具把EMF转成高清PNG。
批量处理时,推荐使用一个小技巧:在Word中利用VBA宏,遍历文档中的所有OLE公式对象,逐个导出为图片。我这里给出一段简化的VBA参考代码:
Sub ExportEquationsAsImages() Dim obj As InlineShape Dim i As Long Dim path As String path = "C:\Temp\Equations\" i = 1 For Each obj In ActiveDocument.InlineShapes If obj.Type = wdInlineShapeEmbeddedOLEObject Then obj.Range.Copy ' 此处调用ImageMagick或GDI+将剪贴板图片保存为PNG i = i + 1 End If Next obj End Sub用VBA处理的对象类型判断,需要根据Word版本调整。如果你的文档中公式是wdInlineShapeEmbeddedOLEObject,那么可以批量复制出来。复制到系统剪贴板后,再用外部工具保存成PNG。我用的是一套基于Python的PIL脚本,它会监听剪贴板并保存图片,实现半自动化。
4.2 在帝国CMS中上传图片并插入
得到PNG图片后,进入帝国CMS后台的“附件管理”,上传到对应目录,然后在编辑器中点击“插入图片”。插入时建议设置显示的宽度:
- 行内公式:不要单独占一行,选择“浮于文字上方”几乎不可用,最好在图片属性里设置“垂直对齐方式”为“居中”或“基线对齐”,否则公式会和文字错位。
- 独立公式(块级):一组公式可以居中显示,并用
<div style="text-align:center;">包裹,保证前端居中排布。
帝国CMS 7.5的编辑器插入图片后,默认会生成一个<img>标签,并带有width和height属性。这里建议把width属性删掉,只保留height或什么都不设置,让图片按原始尺寸显示,避免拉伸变形。如果确实需要缩小图片显示,建议等比缩放,并保持图片文件本身就是Web友好的分辨率,至少2倍显示尺寸,例如显示为400像素宽,就导出800像素宽的图片。
4.3 图片公式的利与弊
图片公式的优势非常明显:不依赖任何JavaScript库,不挑浏览器,帝国CMS后台也不会有任何兼容问题;同时粘贴后公式形状完全等同于Word中的渲染,不会因为数学语法问题出现代码错误。
劣势也很突出:图片无法检索,站内搜索“二次函数”时搜不到图片内容;修改时原图已经丢失,只能重新转换;如果文章数量多,图片体积会显著增加页面加载时间。所以我一般只建议在三种情况下用图片方案:站点无法修改模板、公式极少且只发布一次、整站迁移时来不及处理LaTeX。
5. 实操方案三:使用网页编辑器自带的粘贴清理功能
不少用户其实不满意前面的复杂操作,他们期待“像粘贴Word表格一样直接粘贴公式”。我可以负责任地说,在帝国CMS 7.5默认编辑器里,直接粘贴公式获得完美效果几乎不可能,但可以通过“编辑器粘贴清理”减少破坏。
5.1 帝国CMS 7.5编辑器中的“从Word粘贴”按钮
在帝国CMS 7.5默认编辑器的工具栏里,通常有一个“从Word粘贴”图标,点击后会弹出一个对话框,提示你先在Word中复制内容,然后再到对话框里粘贴。这个设计的出发点是:浏览器直接Ctrl+V时,会携带大量Word私有的XML数据,导致编辑器HTML混乱;而通过这个对话框粘贴,编辑器会调用专门的过滤函数,只保留安全的段落、表格、图片标签。
但对于公式内容,这个按钮同样无能为力。它只能清理HTML结构,无法把OLE对象转换成有效的HTML。公式依然会丢失或变成占位符。
5.2 使用“纯文本粘贴”后重新用编辑器公式工具录入
如果你不想安装MathType,也不想折腾图片,最简单的方式是把公式“数字化”地重新录入。我的习惯操作是:先在Word文档中右键复制公式,但不要直接粘贴,而是把公式对应的Word样式截图或用手机拍下来放在旁边,然后在帝国CMS编辑器里,用公式编辑工具重新输入一遍。
帝国CMS 7.5默认编辑器不一定自带公式编辑工具,但你可以通过后台“自定义工具栏”添加一个“插入公式”按钮,或者干脆使用第三方的CKEditor插件。如果你不想扩展编辑器,可以在源码模式下手写一段图片或LaTeX代码。
这种方式看起来麻烦,但对少量公式来说,反而比来回转换稳定得多。你只要把公式当作普通数学表达式,用上下标和特殊符号录入即可。直接录入的方式还有一个额外好处:公式变成纯文本符号后,可以被搜索引擎收录,也可以被用户选中复制。
5.3 设置编辑器过滤规则,避免样式干扰
帝国CMS 7.5后台的编辑器参数配置里,有一个“过滤模式”选项,可以选择“标准”、“简单”、“不启用”。很多人为了让Word内容完整呈现,直接改成“不启用”,结果公式粘贴后可能保留一堆样式垃圾,甚至把外部CSS也带进去。
我的建议是:使用“标准过滤”,然后在自定义过滤规则里,把p、span、img、table、tr、td这几个必要标签加入白名单。针对公式,重点保留img标签的src和alt属性,这样即使粘贴后只剩图片,也不会被过滤掉。注意,Word公式作为OLE对象转换成的图片,其src往往是file:///协议的本地路径,这种路径在浏览器中无法访问,粘贴后依然会显示红叉,所以过滤规则解决不了本质问题。
6. 常见问题与排查技巧实录
以下是我在实际项目里遇到的典型问题,整理成表格,再逐条展开。
| 现象 | 直接原因 | 解决优先级 |
|---|---|---|
粘贴公式后显示{EMBED Equation.DSMT4} | Word公式以OLE对象复制,编辑器保留纯文本 | 高 |
| 公式变成一张小图,但很模糊 | 剪贴板中的96dpi位图被接收 | 中 |
| 公式显示为空白或占位框 | 浏览器不支持EMF/WMF格式呈现 | 高 |
| 公式与文字基线不对齐 | <img>的垂直对齐方式为默认值 | 中 |
6.1 公式粘贴后变成一张小图或空白占位符
这种情况最常见于Word 2007以后的自带公式。复制时,剪贴板中会包含一个低分辨率的屏幕快照,以及一段MathML文本。帝国CMS编辑器可能会接收快照,但由于快照本身只有96dpi,页面拉伸后非常模糊。
解决办法:直接放弃剪贴板中的位图,改用MathType复制LaTeX。如果电脑没装MathType,可以在Word中把公式显示比例调大,扩大到300%后截图,再上传截图。这个方法虽然笨,但能缓解模糊问题。
6.2 公式显示为MathType域代码或{EMBED Equation.DSMT4}
这说明编辑器的过滤规则把OLE对象转成了文本域代码。不要在编辑器里试图删除这串代码,否则可能误删整段内容。正确操作是:切换到源码模式,找到被花括号包裹的域代码,手动删除。然后重新用MathType或图片方式录入公式。
如果整篇文章已经保存并且生成了静态页面,那需要回到后台重新编辑,写覆盖静态页。帝国CMS 7.5的文章编辑页面里有“更新信息”按钮,修改后一定要重新生成,否则前台看到的还是旧内容,很多人误以为没改成功,其实是忘了这一下。
6.3 粘贴后行内公式与文字不对齐
图片公式插入行内时,默认的vertical-align是baseline,但公式的底部通常比文字基线更低,看起来会“顶出”一行。解决办法是在源码模式下给公式图片添加样式:
<img src="公式图片地址" style="vertical-align: middle;" />对于LaTeX渲染的公式,MathJax默认会处理好基线对齐,不需要额外设置。如果使用图片,还可以把图片的height设置为相对值,比如height:1.2em,这样公式会跟随文字行高缩放。
6.4 批量文章需要处理上百个公式怎么办
我接过一个比较复杂的迁移项目,某网站有三百多篇理科文章,每篇都包含大量公式,原来全部是Word文档,需要导入帝国CMS。我当时的流程是:
- 先统一将Word文档转换为HTML,用“另存为网页”的方式保存,但此时公式会以图片或VML形式存在。
- 检查HTML文件,如果公式是图片,直接保留并使用帝国CMS的远程下载功能批量采集附件。
- 如果公式是VML,需要先转换为图片,我写了脚本把VML标签替换成对应的图片标签。
- 将整理后的HTML内容,通过帝国CMS的“从文本导入”功能批量入库。
整个过程最耗时的不是技术,而是清洗新旧格式差异。建议你先拿十篇做试点,确认公式显示无误后再全量导入。
7. 最后再说几句体己话
关于Word公式粘贴到帝国CMS 7.5这件事,我踩过很多坑,最后总结出一个最省心的套路:如果网站偶尔发一两篇理科文章,就直接用MathType复制LaTeX,前端挂MathJax,一劳永逸;如果不想改模板,就老老实实把公式导出成2倍尺寸的PNG再上传;如果连图片都不想传,那就接受现实,用纯文本重新录入,别跟剪贴板较劲。
另外,做网站内容维护的朋友,我建议在内部制定一个公式录入规范,比如“所有文章统一用图片公式”或者“统一用LaTeX”。因为你不规范,编辑就会各自为政,今天这个用图片,明天那个用MathJax,后台数据乱成一锅粥,后期维护会非常痛苦。我亲眼见过一个站点因为混用了三种公式方案,最后搜索结果里摘要全是乱码,翻来覆去排查了很久。
这个经验不只在帝国CMS 7.5上适用,换成其他任何富文本编辑器,思路都完全一致。别指望编辑器自动替你解决一切,只有把公式在Word那一端“翻译”成网页能懂的语言,粘贴问题才能彻底根治。