❌

阅读视图

发现新文章，点击刷新页面。

一个普通Word文档，为什么99%的开源编辑器都"认怂"了？我们选择正面硬刚

✇掘金 前端
徐小夕

先上一张图：

图片

这个是 Word 中我们高频使用的文档案例，在合同，公文，档案等各个场景中都能看见，但是我测试了市面上10多个主流开源的富文本/文档编辑器，没有一个能完整把上面的样式 1: 1 解析出来，99%解析的效果都是这样：

图片

其实在很多在线文档系统里，DOCX 导入后的效果之所以容易失真，是因为它们通常只保留了最表层的字号、颜色和段落，而丢失了真正决定版式的细节：

  • 分散对齐
  • 字符缩放
  • 字间距
  • 精确行距
  • 文档网格
  • 页面尺寸与页边距
  • 中西文混排规则

在 Web 编辑器领域，中文排版长期被忽视。大多数编辑器仅关注英文排版模型，导致中文文档出现标点溢出、行距不均、分散对齐缺失等问题。

为了解决这个痛点，我们花了半年时间做技术研究和验证，终于实现了一套高精度Docx解析算法，支持各种复杂的Word样式排版的解析渲染，并能在Web端实时编辑。

图片

没错，它就是 jitword，对标 Word 排版效果，原生支持中文排版规范，实现高保真文档导入导出。

老规矩，先上地址：

开源sdk: github.com/jitOffice/j…

JitWord 从底层重新设计了排版引擎，原生支持 GB/T 标点压缩、分散对齐、字符缩放、网格行距等专业排版特性，并实现了与 Word 格式的高保真双向互转。（虽然目前还达不到100%精度，但实测已经是业内top3的方案了）

下面是我们设计的高精度docx解析的技术架构：

图片大家可以参考一下，下面我会和大家详细分享一下我们实现的方案细节。

核心排版能力

一、分散对齐 — 像 Word 一样均匀分布每个字符

图片

传统 Web 编辑器只有左对齐、居中、右对齐、两端对齐四种模式。JitWord 额外实现了 分散对齐（Distribute） ，这是中文公文和正式文档中的必备排版方式。

实现原理：

  • 精确计算每行可用宽度与文本实际宽度的差值
  • 将差值均匀分配到每个字符间隙中：间距 = (行宽 - 文本宽) / (字符数 - 1)
  • 实时响应窗口缩放和字体变化，通过 ResizeObserver 动态重排
  • 三重 CSS 保障：text-align: justify + text-align-last: justify + text-justify: inter-character

效果：  每个字符等间距分布，行首行尾严格对齐，无论段落宽度如何变化都保持均匀美观。

二、字符缩放 — 灵活调整字符宽度比例

图片

支持 33% 到 200% 共 8 档水平缩放预设，可在不改变字号的前提下调整文本密度。

技术方案：

  • 使用 CSS transform: scaleX() 实现无损缩放
  • 自动补偿缩放后的布局宽度，确保分散对齐等特性不受影响
  • 导出 Word 时精确映射到 w:rPr > w:w 字符缩放属性

应用场景：  表格单元格内容过长时压缩显示、标题需要加宽强调效果、模拟 Word 中的字符缩放格式。

三、CJK 排版四件套 — 原生中文排版规范支持

JitWord 内置四项核心 CJK 排版特性，可从 Word 文档中自动识别并还原：

特性 作用 技术实现
严格折行 防止句号、逗号等标点出现在行首 line-break: strict + 东亚换行规则检测
标点压缩 连续标点（如 」、) 自动挤压间距 CSS text-spacing-trim: normal (渐进增强)
字距控制 保持 CJK 字符等宽边界 font-kerning: none 禁用西文字距调整
中英文自动间距 中文与英文/数字之间自动添加间距 CSS text-autospace: normal (渐进增强)

导入兼容性：  从 Word 文档的 <w:documentLayout> 配置中自动提取 characterSpacingControl、doNotWrapTextWithPunct、noPunctuationKerning、balanceSingleByteDoubleByteWidth 等属性，精确映射到对应的 CSS 排版规则。

四、字间距精细调整

支持以 磅值（pt）  为单位的字间距调整，与 Word 完全一致：

  • 预设 9 档：从紧缩 -2pt 到加宽 5pt
  • 快捷键支持：每次增减 0.5pt，范围 -5pt ~ 10pt
  • 导出 Word 时精确转换为 twentieths of a point（Word 原生单位）

五、网格行距 — 公文排版标准

图片

支持 Word 文档网格（Document Grid）特性，段落基线自动对齐到文档网格，完美还原政府公文 "每页固定行数" 的排版要求。

高保真文档互转

DOCX 导入 — 五阶段 IR 管线

图片

JitWord 采用自研的中间表示（IR）架构，实现从 Word 到编辑器的高保真格式转换：

DOCX 文件 → XMLAST 解析 → DocIR 中间表示 → JitWord JSON 映射 → Schema 合规校验

关键能力：

  • 格式完整保留段落对齐、字间距、字符缩放、行高、缩进等属性逐一映射
  • CJK 属性提取自动识别文档级排版设置（标点压缩、折行规则、网格配置）
  • 图片异步持久化嵌入图片自动提取、上传到服务端，支持降级到 Base64
  • 智能降级docx4js 为主引擎，mammoth.js 作为兼容性备选
  • 诊断报告导入后生成详细报告，标注不支持的特性和有损转换项

DOCX 导出 — 精确格式输出

编辑器内容反向导出为标准 Word 文档：

  • 对齐方式精确映射（含分散对齐 AlignmentType.DISTRIBUTE）
  • 字间距从 pt 转换为 Word 的 twips 单位（ptValue × 20）
  • 字符缩放转换为 Word 百分比（0-400%）
  • 支持浮动图片、复杂表格、有序/无序列表、代码块
  • 数学公式支持：LaTeX 自动转换为 Word OMML 格式

PDF 导出 — 像素级还原

自研的 PDF 导出引擎，确保所见即所得：

  • 逐元素分页精确计算每个元素的垂直空间占用，智能分页
  • 双渲染策略优先使用 SVG foreignObject（更好的字体支持），自动降级到 Canvas 渲染
  • 保真度校验导出后自动采样校验画布内容，检测空白或异常渲染并触发重试
  • 布局锁定导出时等待字体加载、图片加载、DOM 稳定后再截图
  • 图表/脑图静态化ECharts 图表和脑图自动转换为静态图片嵌入

单位体系统一

全链路采用 磅值（pt）  作为标准单位，与 Word 原生体系一致：

场景 单位 转换关系
编辑器内部 pt 基准单位
CSS 渲染 px 1pt = 1.333px
Word 文档 twips 1pt = 20 twips
导入兼容 half-points 1pt = 2 half-points

与其他 Web 编辑器的对比

能力 JitWord 通用富文本编辑器 在线协作文档
分散对齐 原生支持 不支持 部分支持
字符缩放 33%-200% 不支持 不支持
标点压缩 自动识别 不支持 不支持
严格折行 智能启用 不支持 基础支持
网格行距 完整支持 不支持 不支持
DOCX 高保真导入 五阶段 IR 管线 基础 HTML 转换 有损导入
DOCX 导出 精确格式映射 有限支持 有损导出
PDF 导出保真度 像素级 + 双渲染 浏览器打印 服务端渲染

最后总结一下

JitWord 从排版引擎层面解决了中文 Web 排版的核心痛点，通过自研的分散对齐算法、CJK 排版规范支持、五阶段 IR 导入管线和像素级 PDF 导出，实现了 Web 端对 Word 排版效果的真正对标。

图片

无论是政府公文的严格格式要求，还是企业文档的专业排版需求，我们都能提供开箱即用的解决方案。

当然我们还在持续迭代优化，打造更高精度，更智能的AI协同文档系统，让个人和企业能更低成本将传统 Office “搬到”线上。

大家有好的建议随时交流反馈～

❌