帝国CMS的后台编辑器,我用了很多年。日常更新文章时,最常见的需求就是把一篇排版漂亮的Word文档原样搬到网站上——标题层级、表格线、加粗、项目符号,样样都要保住。但实际操作过的人都知道,从Word到网页这条路,从来都不是复制粘贴那么简单。尤其是当你用了帝国CMS这种自带编辑器形态比较固定的后台时,直接在编辑器里Ctrl+V,经常得到一地鸡毛。
要解决这个问题,首先得搞清楚Word到底在后台做了什么。很多人以为Word文档就是"有格式的文字",复制到网页上应该和打印出来一样。实际上,现代Word文档(docx)本质上是一个zip压缩包,里面是一堆XML文件,而网页HTML需要的是一套完全不同的标记语言。当你从Word复制内容到浏览器时,Word会把内部格式翻译成一套带有大量专有标记的HTML——这就是翻车的源头。
这套翻译结果有多离谱?只需在帝国CMS编辑器里粘贴一段Word内容,然后切到源码模式看一眼,你会发现满屏都是类似这样的代码:
html复制<!--[if gte mso 9]><xml><w:WordDocument><w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel></w:WordDocument></xml><![endif]-->
<p class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;text-align:left;line-height:150%;"><span style="font-size:12.0pt;font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;">这里是正文内容</span></p>
这段代码里有几个非常典型的问题:
第一,MSO(Microsoft Office)命名空间和条件注释。<!--[if gte mso 9]> 这种条件注释是专门给老版本IE看的,现代浏览器会忽略,但代码量巨大,一个几千字的文档可能塞进几十KB的垃圾标记。
第二,mso-前缀的行内样式。Word会把自己特有的样式属性(mso-margin、mso-ascii-font-family等)全部导出成内联style,这些属性在网页上多数不生效,却会干扰浏览器对标准CSS属性的解析。
第三,class名称全都叫MsoNormal、MsoHeader、MsoTableGrid这种"看起来像标准类名,实际上全是Word私有类"的东西。如果帝国CMS的模板CSS里恰好有同名类的样式规则,页面渲染就会窜。
这些垃圾代码带来的直接后果是:网页上文字大小不一致、段落间距怪异、表格线粗细混乱,更严重的还会导致页面加载变慢、移动端排版溢出。所以,想要实现Word文档的跨平台无损发布,第一步不是学习编辑器怎么用,而是学会"去Word化"。
1. 从Word到HTML:把"翻译错误"扼杀在源头
很多人拿到Word文档,第一反应是打开帝国CMS后台编辑器,直接全选复制。这个操作在少数几个版本的编辑器里也许能得到凑合的排版,但绝大多数情况下你是在把Word的专有格式硬塞进HTML里,后续清理的时间比你直接重新排版还长。我的经验是:在进入CMS之前,先把Word转成一份干净的HTML。这个环节决定了后面所有步骤的成败。
1.1 Word自带的"另存为网页",为什么选筛选过的网页而不是单个文件网页
Word从2003时代就提供"另存为网页"功能,很多老站长以为这个功能是给网页设计用的,其实它最大的价值在CMS内容发布场景。操作路径很简单:打开Word文档,文件 -> 另存为 -> 选择网页(.html),但这里有个关键选项——在弹出的保存对话框里,工具按钮下面有个"网页(.htm,.html)"和"单个文件网页(.mht,.mhtml)"之分。不要选单个文件网页。
原因在于:mht是把图片和HTML打包成一个文件,帝国CMS无法直接解析mht里的图片资源,你需要额外工具解包;而标准的"网页"格式会生成一个HTML文件加一个同名文件夹,文件夹里就是文档中的全部图片。HTML文件可以直接用任意文本编辑器打开,图片文件夹可以按目录结构上传到帝国CMS的附件目录。
这里有一个很多新手没注意到的细节:Word另存为网页时,会在HTML文件开头写入一个<meta name=ProgId content=Word.Document>标签,同时把大量Office专有的<o:p>空段落标签插入正文。这些都需要在进入CMS之前清掉。我自己常用的做法是用VS Code或Sublime打开这个HTML,先用正则清理明显无用的块,再复制<body>里的内容。
以一份包含三张图、一个表格、若干标题的Word文档为例,另存后HTML至少有2000到3000行代码,其中超过六成是Word自动生成的样式声明和命名空间。如果不在这个阶段处理,后面在帝国CMS编辑器里你会面对一座代码垃圾山。
1.2 更推荐的做法:先用外部工具清洗,再进CMS
在已有Word文档的情况下,我这两年最顺手的流程是:先在本地转HTML,清洗,再进帝国CMS编辑器粘贴,而不是直接在编辑器里贴Word。
清洗工
