1. 需求边界军工系统里的格式保留和普通Web项目完全不同1.1 典型业务场景决定你要保留的到底是哪些格式干过军工类信息系统的人都有一个共同体验用户说得最多的一句话不是这个功能没有而是这格式怎么又变了。原因在于这类系统的富文本工具承载的内容类型非常固定公文收发、技术通知、档案归档、评审记录、控制室值守日志基本都是Word排版好之后再进系统流转。所以格式保留在军工语境下指的不是网页排版有多精致而是三个硬指标。第一从Word复制进来的内容字体、字号、行距、缩进、编号层级不能乱。第二编辑保存后再次打开图片位置、表格宽度、页边距还能稳定。第三最终打印或导出PDF交付归档时纸面版式与线上看到的要基本一致。我接触过的一个项目甚至要求把Word里的多级标题编号、审签栏的斜线表头、带上下标的技术参数都完整映射到HTML存储中。这就意味着单靠编辑器默认粘贴行为是绝对不够的。富文本编辑器的内核只是把粘贴内容转成HTML节点它并不理解仿宋_GB2312三号标题应该用什么CSS表达这个符号应当落在Word表格的第三行第二列。这些都要靠插件层面的解析、映射和再渲染去弥补。1.2 封闭内网、旧终端、国产化办公环境叠加后的选型约束普通Web项目选插件时可以比功能、比颜值军工系统的选型逻辑完全不同。第一重限制是封闭内网。很多机房和办公网络与互联网物理隔离开发者不能指望浏览器在用户端从CDN加载任何第三方脚本。所有插件、依赖、语言包、字体文件都必须提前打包好放进项目里统一发布。选型时就多了一条硬指标这个插件的依赖树深不深npm install 之后能不能整树离线交付。第二重限制是老终端和旧浏览器并存。军工单位的终端更新周期很长有些还停留在老版本浏览器内核甚至依赖各类办公助手控件。新富文本编辑器在高版本Chrome里跑得风生水起一到这类终端直接白屏或者丢失事件监听。插件如果依赖了较新的DOM API兼容性就得打问号。第三重限制是国产化办公环境的适配。这些年不少单位在逐步切换国产操作系统和办公套件富文本工具要同时兼容WPS格式和Office格式。插件不仅要在国产浏览器内核上工作还得处理好WPS粘贴数据与Word粘贴数据的差异。否则就会出现同一个文档在A机器上粘贴正常在B机器上格式丢了一半的情况。这三重限制叠加在一起的时候我通常建议项目组先把环境基线排查清楚再谈插件清单。连基线都不知道最后装再好的插件也像在沙子上面盖楼。2. 顺着粘贴到导出的链路把真正需要的插件类别摊开要做到格式保留不是装一个格式保留插件就完事而是按内容在系统里流转的链路分段配置对应的插件能力。我把这段链路拆成四个环节。2.1 Word粘贴清洗Paste from Word及等价方案链路的入口往往是复制粘贴。用户在Word里复制一段带格式的文本浏览器剪贴板里同时存在纯文本、HTML、以及Office特有的数据格式。如果编辑器直接接收这些原始HTML你会看到里面堆满了o:p、w:...这类Office专有命名空间还有大量无用内联样式。直接存库后数据里全是垃圾节点格式稳定性极差。这一步需要的插件能力业内叫 Paste from Word。CKEditor 4/5 里是同名模块TinyMCE 的对应物是 PowerPaste。它的核心工作是三个解析Word特有的剪贴板标记把非标准命名空间过滤掉将Word的样式语义转换成编辑器能理解的CSS比如把Word的p.MsoNormal转成基础段落样式处理特殊字符比如连续空格变成nbsp;自动编号还原成显式列表。如果你用的是老一代编辑器比如UEditor、早期版本的wangEditor这类能力需要自己写。很多同事习惯用整体正则替换来做我劝你尽早放弃——Word粘贴的HTML复杂度远超正则的覆盖范围越清越乱的风险非常大。更稳妥的思路是先剥离Office私有标签再对少量已知噪声做白名单清理。2.2 表格和多级编号最容易翻车的格式保真点第二个环节是表格。军工类文档表格极多尤其是参数表、审批意见表、评审记录表。用户对表格的诉求向来不是能显示就行而是列宽、合并单元格、跨页表头、表格前后间距都要保留。麻烦在于单位体系。Word里的表格列宽按磅值pt计算网页里按像素px或百分比计算导出PDF时又需要毫米mm。三个单位体系来回转换不经过插件的专门映射单纯靠浏览器默认的table布局表格基本必崩。这里分享一次完整的排查过程。系统导出的PDF里表格被拉伸到页面宽度之外右半边的第四列直接看不到了。第一反应是打印CSS有问题但改打印样式后网页端正常、PDF里还是溢出。接着我用一份最小化复现文档在开发环境重跑打开开发者工具检查导出前表格的DOM结构发现编辑器把Word粘贴进来的table存成了table-layout:auto浏览器按内容自动分配列宽最宽的列把其他列全部挤掉。再往前追发现问题出在粘贴过滤配置里表格的width属性被剥掉了。修正配置强制记录原始列宽比例并用table-layout:fixed重建表格问题才稳定解决。这类问题如果不走这条排查链路很可能在打印样式上白耗两周。多级编号也是同样的道理。Word的多级编号依赖样式联动粘贴进编辑器后经常退化成纯文本数字或丢失缩进层级。格式保留插件需要根据Word段落样式的级别信息重建有序列表的层级关系。这一步不做归档文档的审签逻辑根本没法看。2.3 打印和PDF导出最后交付物上的格式保留用户最终要的不是网页上的HTML而是打印纸或者PDF归档件。这一步的格式保留通常由两个方向的插件负责。一种是纯客户端方案通过打印样式插件控制media print规则再由浏览器本身的打印为PDF能力输出。优点是部署简单缺点是字体陷阱很多很多军工单位使用仿宋_GB2312、楷体_GB2312这类中文字体浏览器打印时如果没有对应字体子集系统会拿默认黑体或宋体替代。字号不变但字形完全不对整份文档的公文感瞬间垮掉。另一种是服务端转换方案比如装一个无界面的办公转换组件把编辑器输出的HTML在服务端转成PDF。这种方式适合批量归档对版式一致性控制更稳但必须提前内网部署好转换服务和字体环境。用的时候还要注意转换组件的文件句柄释放问题否则批量任务跑久了内存会涨成灾难。我把两种方案都实践过最后服役项目选的是双轨日常内容编辑用户直接用浏览器打印归档环节走服务端转换。这样既保证交互流畅又确保最终归档版式可控。2.4 公式、特殊符号与字体匹配的隐藏需求军工系统的富文本里还有一块容易被低估的格式保留需求科技公式、单位符号、技术代号的输入。比如产品技术文档里的载荷计算式、数据处理公式或者带有上下标的参数代号k_max、R²这类内容。如果系统直接处理这类内容至少需要两类配合一是公式编辑插件让用户在页面上以可视化方式插入公式并保真渲染二是对上下标、希腊字母、特殊算符的字符级映射。公式插件要注意离线使用问题。内网环境不能走公网CDN的公式函数库必须把对应资源下载后内置进系统。数据层存储上我建议同时保存公式的源码形式和渲染后的结果避免后续切换渲染库时旧文档全部失效。字体匹配则是全局性的。很多办公字体不在浏览器默认字体集里插件能做的是在渲染层维护一张业务字体到可用字体的映射表保证大多数终端上看到的字形尽量接近原始排版。而要让最终效果完全一致只能走服务端转换并在转换环境里预装同样的字体。3. 我和团队如何做插件选型一张可复用的比选表3.1 候选编辑器与格式保留插件的能力差异市面上能用于内网系统的富文本编辑器主流无非几类CKEditor、TinyMCE、UEditor、wangEditor以及自研轮子。它们对格式保留的支持能力差异很大我把实测结论整理成一张表给后来人参考。编辑器推荐的格式保留模块能力描述商业授权注意点CKEditor 5Paste from Word / 文档打印与PDF导出Word粘贴清洗彻底模板语义完整插件生态成熟模块大量区分免费与商业需逐条核对许可TinyMCEPowerPaste对Word/WPS粘贴兼容好配置项丰富部分高级特性是付费增值包UEditor无官方格式保留模块需自行扩展老牌但停更严重粘贴过滤策略偏粗开源不过现代浏览器兼容要自己修wangEditor早期版本需自建粘贴解析轻量适合简单场景复杂表格能力弱免费开源但格式保留能力有限自研编辑器按需求逐项实现可控性最高但开发和维护成本不低无授权问题这张表说明一个事实没有哪家编辑器自带万能格式保留按钮。所谓格式保留其实是粘贴清洗、表格映射、打印分页、字体替换、公式渲染这几个插件能力的总和。如果项目主体是公文流转建议优先把预算花在Word粘贴模块上如果主体是技术文档和归档表格保真和服务端PDF转换才是大头。3.2 按内网约束确定集成的三类硬性条件我在给自研项目定插件时一般要求同时满足这几条硬性条件。依赖可审。军工类系统对第三方代码的审查要求很严插件源码必须开放、可下载、可离线审读。有些闭源插件的在线调用模式在封闭内网里第一轮就会被淘汰。数据不出口。插件在运行时、上报、授权校验过程中不能偷偷联网。有些商业插件激活时会请求海外许可证服务器这种在隔离环境根本用不了就算能临时激活后续也会因为定期校验导致功能失效。选型时要把插件是否有网络请求作为第一条红线。样式隔离。军工系统老页面很多全局CSS没有隔离意识。插件的自带样式必须支持作用域限定否则接入后很容易把页面其他模块的字体、间距全部带偏。我在项目里还习惯给编辑器区域单独挂个容器类名接到插件之前先验一遍样式覆盖情况。3.3 自研兜底过滤器什么时候该上很多人问既然插件不完美能不能自己写一个格式过滤器把问题都解决我的原则是能用成熟插件解决的部分不重复造轮子但插件覆盖不到的长尾场景必须留一个自研轻量过滤器兜底。举例来说军工场景里常见一个特殊需求从扫描版PDF或OCR工具里复制的文本粘贴进来时常常带上奇怪的换行和空格还夹杂着半角全角混乱。这类内容不属于Word粘贴也不需要复杂公式映射但用户天天都要处理。这种场景用一组十几行的字符级正则就能清理干净没必要为它引入重量级插件。自研过滤器只需要放在编辑器管道的最后一级针对存量数据做字形统一、换行修复、软空格规整就足够。比较重要的是不要用自研过滤器盲目接管Word粘贴流程。Word粘贴的内容结构太复杂轻量过滤器的规则一旦误伤格式损失比不处理还严重。正确做法是成熟插件处理主流格式自研过滤器收拾长尾噪声两者各管一段。4. 部署和配置阶段躲不开的细节问题4.1 插件离线化与依赖收敛选定插件之后落地第一件事就是离线化。内网系统不能在线拿依赖所以要在能上外网的开发机里把整个依赖树拉干净锁版本之后整体内置到一个可内网下载的仓库。具体操作上我会用 npm 的 lock 文件固定版本把插件、插件的依赖、生产构建产物都打进同一个静态资源目录。发布前在内网仿真环境试跑一次构建确认没有出现运行时才拉取的外部资源。像字体、语言包这类东西容易漏特别提醒要检查一遍。另一个容易踩的坑是插件的内置图标或样式引用了字体图标文件。如果构建时忘了把这些字体文件一并转移到了内网就会发现图标全变成方框但功能好像没坏。这种问题排查起来极其耗时间检查清单里必须列上资源完整性这一项。4.2 粘贴白名单配置的一个实际片段以CKEditor 5为例配置Word粘贴过滤时本质上是做白名单管理editorConfig.extraAllowedContent [ p{line-height}, span{font-family,font-size,color}, table[width,height], tr[style], td[colspan,rowspan], ].join( )这样的配置含义是只允许段落和行内元素的指定CSS属性进入编辑器表格只保留尺寸和合并信息其他标签和属性尽量不接收。宁可少保留一些花哨样式也不要把未知标签放进来这在军工系统里尤其重要。因为富文本内容在闭环内还要经过安全过滤、归档接口、打印转换等多道流水线放进来一个未知标签后面每一道环节都要额外处理。实际过程中我们经常追加过滤规则比如剥离style标签禁止javascript:协议限制data:图片的默认行为。这些都是格式保留之外的安全和稳定性考量但做不好前面保留全白费。4.3 浏览器兼容的回归检测与基线留底军工内网的终端环境没法假设所以插件引入后要有一个固定的浏览器回归检测矩阵。我通常准备一份格式化对比样张里面包含带下划线的链接、仿宋字号的段落、多级列表、合并单元格表格、浮动图片、上下标公式。然后再用表格记录每类终端上的表现终端环境粘贴Word表格宽度打印导出公式渲染新版Chromium内核符合预期稳定稳定稳定老版本内核浏览器可能有样式覆盖问题列宽异常分页偏移无法渲染国产内核浏览器基本符合基本稳定需调整打印模板待验证每次版本升级后我会先跑一遍样张对比新旧结果存成截图留底。格式问题大多是回归造成的——升级插件之后某个表格样式突然失效这种情况没有基线截图做对照根本无从判断是谁改坏的。5. 从选型到落地判断格式到底保住没有的验收方法5.1 一组能直接用于验收的格式样章格式保留这件事非常怕凭感觉说可以。我会建议项目组建立一套固定的格式样章格式保留的验收全部以它为准。样章里必须包含这些内容一份公文模板含标题、二级标题、正文、落款字体分别是黑体、楷体、仿宋一份技术表格含合并单元格、多级表头、超宽列一份多级编号列表至少三级序号层级之间缩进明显一份含上下标与公式的文档一个图文混排的页面图片旁边有环绕文字页面内有页眉页脚示意。这套样章直接从业务真实文档里抽取不要编造否则验收结果没有说服力。5.2 自动化比对和人工复核的最简实现自动化层面我用过一个简单但有效的比对思路把样章从Word导入编辑器之后导出编辑器的HTML再用一个固定脚本把HTML里的标签、样式、文本分别提取出来和预期结果比对差异数量。差异数量再结合人工目测基本就能定位格式是否保真。具体实现不复杂一个Python脚本遍历十个用例提取焦点样式的变化值输出diff报告大概一小时能写完。对军工系统来说报告本身就是一次合规证明后续的版本迭代也都有对比依据。人工复核我一般安排两类角色开发人员和最终用户。开发人员盯着HTML里的标签结构看是否干净最终用户只看打印效果完全脱离代码。每改一版插件配置两拨人各看一遍意见能对上才放行。5.3 如果系统是自研编辑器最快补齐格式保留的路径最后说一个很多团队面临的现实系统是多年前自研的编辑器没法直接换CKEditor这时候怎么补格式保留我走过的顺序是先做粘贴入口的清洗把Word粘贴、WPS粘贴、普通文本粘贴分开处理能用现成转换库就引现成的再做存储结构的规整对存量历史数据进行一次标签归一化把过深嵌套的节点压平给后续转换打底最后才动打印和导出优先保证浏览器打印样式的版式一致服务端PDF转换放到第二批迭代。这套路线的核心逻辑是先把进口和存储两个环节稳定下来再解决出口的展示和打印问题。如果反过来先调打印样式粘贴进来的内容还是乱七八糟打印上再怎么调也没用。我在实际项目里还把类似的跑批清理写进了系统日常任务每周定时对新增的富文本数据做一次噪声扫描发现异常的嵌套层级自动告警。这个操作看着不起眼但对军工这种数据量不小、还要求长期稳定的环境来说能避免很多问题拖到归档阶段才集中爆发。踩过几轮样章和真实环境联调的坑之后我自己最大的体会是格式保留插件不是装上去就结束的任务而是一个要跟着业务文档结构持续迭代的模块。真正可靠的做法永远是拿一批业务真实样章反复比对Word原稿、网页编辑、最终输出三者之间的差异把每个差异拆成具体规则再回到配置和插件里去修正。