Word Editor 官方公测:不用转换服务,也能在浏览器里编辑 DOCX

企业系统里的 Word 文档，早就超出了“打开一段富文本”的范围。

合同审阅要保留批注和修订，审批归档要保留页眉页脚和页码，知识库要能打开带目录、脚注尾注、表格、图片、水印、字段和内容控件的 DOCX。很多团队最终都会遇到同一个问题：能不能在浏览器里完成 Word 文档的打开、分页显示、结构化编辑、保存回传，并尽量保留 OOXML 结构？

Word Editor 官方公测版已开放，在线 Demo 已开放体验。开发者和企业团队现在可以直接评估它是否适合自己的合同、审批、知识库、档案、低代码平台和中后台业务系统。

Word Editor 是什么

Word Editor 是一个纯 TypeScript 实现的浏览器内 DOCX 预览/编辑 Web Component，面向企业系统集成场景。

它的核心目标很明确：在浏览器内完成 DOCX 打开、分页渲染、结构化编辑和保存回传；不依赖 Document Server，不依赖 x2t 转换链路，不内置 OnlyOffice 运行时，也不把 Word 文档简单降级为普通富文本。

当前产品状态如下：

体验入口：

• 官网：https://docx-editor.pages.dev/^[1]
• 在线 Demo：https://docx-editor.pages.dev/examples/demo/^[2]

在线 Demo 能看到什么

在线 Demo 展示的是一个可嵌入业务系统的 Word-like 编辑面。标题栏、Ribbon、分页纸张、标尺、状态栏、右键菜单、上下文工具栏和文档页面都在同一个 Web Component 中完成。

Home Ribbon 覆盖字体、段落、样式、查找、校对等常用入口。用户选中文本后，可以围绕当前选区执行字体、字号、颜色、段落和样式命令。

布局、引用和审阅能力也形成了独立 Ribbon 面板。布局覆盖页边距、方向、大小、分栏、行号、页面边框和页面颜色；引用覆盖目录、脚注尾注、引文、题注和交叉引用；审阅覆盖批注、修订标记、接受/拒绝、辅助功能和校对入口。

对象编辑能力体现在上下文 Ribbon 和右键菜单里。图表、SmartArt、形状、图片、媒体、公式、表格等对象会触发不同上下文面板，并提供复制、粘贴、环绕、替代文字、删除等对象操作。

页眉页脚、目录和引用字段是企业文档里很容易被低估的部分。Word Editor 覆盖 section-aware 页眉页脚、页码字段、总页数字段、不同首页/奇偶页、链接上一节和字段刷新链路。

长文档分页效果如下。对业务系统来说，100 页级文档能否保持分页、滚动定位、状态栏反馈和表格呈现，往往决定了它能否进入合同、审批和归档流程。

核心架构：前端内完成 DOCX 编辑链路

Word Editor 的前端链路可以概括为：

宿主业务系统 → <word-editor> Web Component → TsDocxEngine → DOCX Worker Client → DocxSession / OOXML → 分页视图层。

这条链路里，宿主业务系统负责鉴权、权限、存储、审计、云协作、企业身份和业务流程。Word Editor 负责 DOCX 打开、编辑体验、命令执行、分页视图、OOXML 往返和保存导出。

这样的边界很重要。DOCX 文件里可能包含宏、ActiveX、OLE、IRM、签名、受保护内容、第三方扩展部件和历史 Office 环境留下的未知信息。Word Editor 的策略是：能理解的可编辑，暂不处理的尽量保留；高风险内容走安全只读、保留或宿主策略。

技术拆解

1. DOCX / OOXML 会话

DOCX 本质上是一个 Open Packaging Convention 包。Word Editor 会读取文档主体、样式、编号、关系、媒体、页眉页脚、脚注尾注、批注、修订、字段、内容控件和文档设置，并在保存时尽量保留未知部件和关系。

这对企业文档很关键：很多合同和审批材料里都有模板系统、签批系统、第三方组件或历史 Office 环境留下的扩展信息。编辑器需要在可编辑范围内处理结构，在未知范围内保留上下文。

2. Worker 打开与保存

DOCX 解析和序列化可能涉及较大的 XML、图片和关系图。Word Editor 使用 Web Worker 优先处理打开与保存链路，减少主线程阻塞；运行环境能力不足时会回退到可用路径，保证基本流程可完成。

3. 结构化选区与命令模型

普通富文本编辑依赖浏览器原生命令时，遇到表格、批注、修订、字段、分页和页眉页脚很容易失控。Word Editor 使用结构化选区模型和命令模型，让字体、段落、样式、表格、引用、审阅等操作落到明确的文档结构上。

4. 分页视图与 Word-like UI

Word 文档的使用体验高度依赖分页、标尺、页边距、页眉页脚、状态栏和 Ribbon。Word Editor 使用分页纸张视图和虚拟页面策略，配合标题栏、Ribbon、上下文工具栏、右键菜单和状态栏，让业务系统内的编辑体验更接近用户熟悉的 Word 工作流。

5. 字体与多语言

企业文档常常同时包含中文、英文、数字、符号、表格和不同字体族。Word Editor 支持字体注册、字体网关、浏览器端持久字体记录、CJK / Latin / bidi / Arabic / Thai / 竖排辅助能力。商业字体由企业或用户按自身授权提供。

6. 安全边界与宿主能力

Word Editor 不执行宏、ActiveX，也不内置企业身份、实时云协作、翻译、转录、密码解密或 IRM 策略。宿主系统负责这些企业级能力，并决定哪些按钮、保存入口、导出入口、审阅入口对当前用户可见。

能力矩阵：按企业接入模块来看

接入方式：从最小使用到企业集成

安装

npm install @word-editor/word-editor

最小使用

<word-editorid="editor"mode="edit"></word-editor><scripttype="module">import"@word-editor/word-editor";const editor = document.querySelector("#editor");await editor.loadBlank("contract.docx");await editor.exec("bold");await editor.insertTable(3, 4);const blob = await editor.save();</script>

URL 加载

const response = awaitfetch("/api/files/contract.docx");if (!response.ok) thrownewError("DOCX download failed");const blob = await response.blob();await editor.load(blob, "contract.docx");

File / Blob / ArrayBuffer 加载

input.onchange = async () => {const file = input.files?.[0];if (!file) return;await editor.load(file, file.name);};const blob = newBlob([arrayBuffer], {type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",});await editor.load(blob, "from-arraybuffer.docx");

鉴权下载后加载

鉴权逻辑建议留在业务系统里：

const response = awaitfetch(`/api/secure-files/${fileId}`, {headers: {Authorization: `Bearer ${token}`,  },});const arrayBuffer = await response.arrayBuffer();await editor.load(arrayBuffer, "review-contract.docx");

组件只处理 DOCX 内容，业务侧继续管理 token、权限、审计日志和下载策略。

无扩展名文件处理

const response = awaitfetch(`/api/files/${fileId}`);const arrayBuffer = await response.arrayBuffer();await editor.load(arrayBuffer, "business-document.docx");

业务侧可以先检查 Content-Type、服务端元数据、ZIP magic number 和 [Content_Types].xml，再把明确的 .docx 文件名传给编辑器。

私有化部署、Worker 与静态资源

私有化部署时建议：

字体网关示例：

<word-editorid="editor"mode="edit"engine="ts"auto-font-gatewayfont-gateway-url="https://font.example.com/manifest.json"font-gateway-limit="48"></word-editor>

生命周期事件

editor.addEventListener("ready", () => {console.log("editor ready");});editor.addEventListener("loaded", (event) => {console.log("loaded", event.detail);});editor.addEventListener("changed", (event) => {console.log("dirty", event.detail.dirty);});editor.addEventListener("saved", (event) => {console.log("saved", event.detail.blob);});editor.addEventListener("error", (event) => {console.error(event.detail.code, event.detail.message);});

权限前置校验

const status = await editor.getRuntimeStatus();if (status?.documentReady && userCanEdit) {  editor.setMode("edit");} else {  editor.setMode("view");}

业务系统可以根据用户角色、文件状态、审批节点和锁定状态，控制编辑、保存、导出、批注、修订等入口。

保存上传

const blob = await editor.save();awaitfetch(`/api/files/${fileId}`, {method: "PUT",headers: {"Content-Type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",  },body: blob,});

save() 返回 DOCX Blob，后续可以由业务侧下载、上传后端、写入对象存储或进入审批流程。

打印

window.print();

打印依赖浏览器、宿主页面 CSS 和企业打印策略。对合同、归档和法务场景，建议用真实业务样本做打印验收。

字段刷新、批注和修订

await editor.exec("insertToc");await editor.exec("updateFields");await editor.exec("insertComment", "请法务确认这一条款");await editor.exec("toggleTrackChanges");await editor.exec("acceptAllRevisions");

常用命令还包括 insertFootnote、insertEndnote、insertCitation、insertBibliography、insertCaption、insertCrossReference、insertBookmark、toggleMarkupView、toggleRevisionFilter。

React 嵌入

import"@word-editor/word-editor";import { useEffect, useRef } from"react";exportfunctionContractEditor({ file }: { file: File }) {const ref = useRef<HTMLElement | null>(null);useEffect(() => {if (ref.current && file) {void (ref.currentasany).load(file, file.name);    }  }, [file]);return<word-editorref={refasany} mode="edit" />;}

Vue 嵌入

<template>  <word-editor ref="editor" mode="edit" /></template><script setup lang="ts">import "@word-editor/word-editor";import { ref } from "vue";const editor = ref<any>();async function openFile(file: File) {  await editor.value.load(file, file.name);}</script>

Svelte 嵌入

<script lang="ts">  import "@word-editor/word-editor";  let editor: HTMLElement & {    load(file: File, name?: string): Promise<void>;    save(): Promise<Blob>;  };  export async function openFile(file: File) {    await editor.load(file, file.name);  }</script><word-editor bind:this={editor} mode="edit" />

原生 JS 嵌入

import"@word-editor/word-editor";const editor = document.createElement("word-editor");editor.setAttribute("mode", "edit");document.body.appendChild(editor);await editor.loadBlank("blank.docx");

业务场景

需要提前规划的部分也很清楚：旧格式转换、企业身份、实时云协作、翻译转录、商业字体授权、密码解密、IRM、存储审计和审批流，都应由宿主平台或企业基础服务承接。

公测阶段欢迎反馈什么

Word Editor 官方公测版已开放，当前最需要来自真实业务系统的反馈：

• 无法正确打开、渲染或保存的 DOCX 样本。
• 合同、审批、知识库、档案、法务修订中的具体流程。
• Word、WPS、OnlyOffice 或 Word Online 中的正确显示效果对照。
• 浏览器版本、系统版本、复现步骤、脱敏截图或录屏。
• 私有化部署、离线环境、字体资源、权限控制和商用接入需求。

请勿上传未脱敏的合同、客户数据、个人信息或受版权保护内容。若样本无法公开，可以先提交问题描述，再沟通安全提交方式。

商用授权说明

开发体验和技术评估可以先使用官网、在线 Demo、文档和公开体验包。

如果用于商业项目、SaaS 产品、客户交付项目、企业内部生产系统、私有化部署、OEM 或其他生产环境集成，商用需购买商用授权。

咨询入口：https://github.com/flyfish-dev/word-editor/issues/new?template=purchase-intent.yml^[3]

咨询时建议说明使用场景、部署方式、预计用户规模、是否需要私有化/离线授权、是否需要定制功能或技术支持。

结语

Word Editor 已经进入官方公测阶段，在线 Demo 已开放体验。它把 DOCX 打开、分页渲染、结构化编辑和保存回传放到浏览器内完成，并通过 Web Component 形态进入企业业务系统。

如果你的团队正在处理合同审阅、审批留痕、知识库文档、档案归档、法务修订或低代码平台里的 Word 文档，欢迎通过在线 Demo 体验，也欢迎反馈真实 DOCX 样本、兼容性问题和业务场景。

后续会继续完善正式版能力、文档、示例代码和企业集成路径，最终我们一定会保证交付一份功能齐全的生产级专业产品。

引用链接