夜雨聆风
你有没有遇到过这种糟心事？
电脑上那个臃肿的Word，开机要半天，打开再卡半天。好不容易改完一份合同，导出发给同事，对面用WPS或者旧版Word一打开，排版全乱了。页眉跑了，表格歪了，字体也变成宋体了。
更头疼的是有些文件挺敏感的，比如带身份证号的合同、带薪资的表格。上传到某个在线文档网站，心里总有点不踏实。
想找个轻量、开源、能在浏览器里直接改.docx的工具？GitHub上还真有人把这事办成了。
这个项目叫 docx-editor，作者 Jedr Blaszyk 是个实打实的行动派。他日常工作里老得让客户往Word模板里填数据，以前的做法巨原始——让客户下载文件，手动改里面的占位符。结果呢？内容丢的丢，排版乱的乱，体验差到他实在忍不了。
他在GitHub上翻了一圈，想找个像样的在线Word编辑器，发现好多项目早就没人维护了。最后干脆一咬牙，让 Claude Code 帮他写了一个。就几个晚上的功夫，一个功能挺全的编辑器就出来了，交互体验直逼 Google Docs。然后，作者直接把它开源了。
这项目最硬核的一点，就是 .docx 进、.docx 出。
市面上很多在线编辑器走的是 DOCX → HTML → 编辑 → HTML → DOCX 这条路。每转一次格式，样式、修订记录、格式就丢一层。docx-editor 不一样，它直截用 OOXML 当核心格式，不绕弯子。你丢进去一个 .docx，改完导出来，排版跟原稿基本一致，不会出现"一导出就乱套"的尴尬。
而且纯浏览器跑，零后端。文件数据全在本地，隐私这块基本不用操心。
说说功能，确实挺全的。
所见即所得编辑。工具栏、标尺、分页，Word 里常见的那些操作习惯，它都支技。字体、段落、列表、对齐，该有的都有。
修订模式。这个太实用了。你改的内容不会直接盖掉原文，而是像 Word 的"修订"那样，用红色标出来。谁删的、谁加的，一目了然。还能逐条采纳或者驳回，跟 Word 的体念几乎一样。
多人实时协作。几个人同时在线改一份文档，光标位置、在线状态、评论，都是实时同步的。作者还在持续优化这块，目前用 Yjs 做底层，效果已经挺稳了。
AI Agent 审稿。这是我觉得最酷的部分。编辑器里内置了一个 Agent 工具，可以调用 AI 来帮你改文档。不只是简单的润色，它还能像真人编辑一样，在文档里加评论、提建议、接受或拒绝别人的改动。更狠的是，作者还给它扩展了 MCP 服务，AI 可以直接操作整个文档，批量替换、调整结构什么的都能干。
插件系统。官方提供了插键 API，你可以自己写插件扩展功能，比如模板插值、自定义工具栏按钮之类的。
那这东西怎么用呢？
最简单的办法，直接访问作者提供的在线 Demo，开箱即用。地址在 docx-editor.dev，打开就能试。
如果你是开发者，想集成到自己的项目里，也巨简单。
React 项目，一行命令：
npm install @eigenpal/docx-editor-react
然后几行代码就能跑起来：
import { useState } from'react';
import { DocxEditor } from'@eigenpal/docx-editor-react';
import'@eigenpal/docx-editor-react/styles.css';
exportfunctionApp() {
const [buffer, setBuffer] = useState(null);
return (
<>
<input
type="file"
accept=".docx"
onChange={async (e) => {
const file = e.target.files?.[0];
if (file) setBuffer(await file.arrayBuffer());
}}
/>
{buffer && <DocxEditordocumentBuffer={buffer}mode="editing" />}
</>
);
}
注意一下，如果你用 Next.js 或者其它 SSR 框架，得用动态导入，因为这个编辑器需要 DOM 环境。
Vue 3 项目 也一样顺：
npm install @eigenpal/docx-editor-vue
<script setup>
import { ref } from 'vue'
import { DocxEditor } from '@eigenpal/docx-editor-vue'
import '@eigenpal/docx-editor-vue/styles.css'
const buffer = ref(null)
async function loadFile(e) {
const file = e.target.files?.[0]
buffer.value = file ? await file.arrayBuffer() : null
}
</script>
<template>
<input type="file" accept=".docx" @change="loadFile" />
<DocxEditor v-if="buffer" :document-buffer="buffer" mode="editing" />
</template>
Nuxt 3/4 更省事，装个模块就行：
npm install @eigenpal/nuxt-docx-editor
// nuxt.config.ts
exportdefault defineNuxtConfig({
modules: ['@eigenpal/nuxt-docx-editor'],
})
它会自动导入组件，还处理了 SSR 兼容，不用你再包一层 <ClientOnly>。
如果你想做国际化，它内置了多语言，中文、英文、德文、法文、希伯来文、波兰文、葡萄牙文、土耳其文都有。中文简体直接引 @eigenpal/docx-editor-i18n/zh-CN 就行。
当然，项目现在也有一些小短板。比如对复杂表格、图片嵌套、脚注尾注的编辑，兼容还不是特别完美。作者也在持续迭代，最近几个月更新挺勤的。
回看这个项目，我觉得工具本身好不好用反而是其次。它最让人感慨的是，作者用 Claude Code 花了几个晚上，就搞出了一个能用的商业级编辑器。放在两三年前，这种事想都不敢想。那时候我们用 AI，顶多让它补几行代码。现在只要你有需求、有想法，AI 就能帮你快速落地。
往后拼的，可能不再是技术多牛。而是谁先发现痛点，谁先动手做出来。
guthub地址：https://github.com/eigenpal/docx-editor