Skip to content

参考

docx-editor(@eigenpal/docx-editor-*)常用包、DocxEditor props、ref 方法、mode 取值、headless 与 agents 入口速查。版本基线 1.5.0。React 与 Vue 适配器的根 API 形状相同(同 props、同 ref 方法,hooks↔composables)。

一、包一览

作用
@eigenpal/docx-editor-reactReact 适配器:工具栏、分页编辑器、插件(传递带入 -core / -i18n)
@eigenpal/docx-editor-vueVue 3 适配器:与 React 对等
@eigenpal/nuxt-docx-editorNuxt 3 & 4 模块,封装 Vue 适配器、SSR 安全、自动导入
@eigenpal/docx-editor-core框架无关核心:OOXML 解析器、序列化器、布局引擎、ProseMirror schema
@eigenpal/docx-editor-i18n共享语言字符串与类型
@eigenpal/docx-editor-agentsAgent SDK 与聊天 UI:工具桥、MCP server、AI SDK 适配器

两个适配器都导出 DocxEditorDocxEditorPropsDocxEditorRefDocxEditorHandleEditorModerenderAsync;框架特定定制走显式子路径 /ui/hooks(Vue 为 /composables)、/dialogs/plugin-api

二、DocxEditor 常用 props

Prop类型默认含义
documentBufferArrayBuffer | Uint8Array | Blob | File要加载的 .docxnull 挂空文档,undefined 推迟挂载)
documentDocument预解析的文档树(替代 buffer)
authorstring'User'修订与批注的作者名
mode'editing' | 'suggesting' | 'viewing''editing'编辑 / 修订(tracked changes)/ 只读查看
onModeChange(mode: EditorMode) => void用户切换模式时回调
readOnlybooleanfalse只读预览(隐藏工具栏、标尺、面板)
externalContentbooleanfalsedocument 仅作 schema 种子,内容由外部(如 Yjs)提供
showToolbarbooleantrue是否显示格式工具栏
showRulerbooleanfalse显示水平/垂直标尺
showOutlinebooleanfalse显示文档大纲侧栏(目录)
initialZoomnumber1.0初始缩放
commentsComment[]受控批注,配 onCommentsChange 经 Yjs/Liveblocks 同步(React 端
onChange(doc: Document) => void文档变更时回调
onSave(buffer: ArrayBuffer) => void工具栏触发保存时回调
onError(error: Error) => void出错回调(解析/渲染错误从这里抛出)
onSelectionChange(state: SelectionState | null) => void选区变化回调
onPrint() => void传入才启用「文件→打印」与 editor.print(),省略则隐藏菜单项
documentNamestring标题栏里可编辑的文档名
disableFindReplaceShortcutsbooleanfalse让浏览器/宿主接管 Cmd/Ctrl+F、Cmd/Ctrl+H

Vue 端:toolbarExtra / renderLogo / renderTitleBarRightVNodeChild 渲染函数;SFC 模板里对应具名插槽 toolbar-extratitle-bar-lefttitle-bar-right

三、DocxEditorRef 方法

方法签名作用
save(opts?: { selective?: boolean }) => Promise<ArrayBuffer | null>序列化为 .docx;默认选择性保存,selective:false 全量重打包
getDocument() => Document取当前文档对象
loadDocumentBuffer(input: DocxInput) => Promise<void>运行时换一份 .docx(不重挂组件)
loadDocument(doc: Document) => void加载一个预解析的 Document
setZoom(n: number) => void设缩放(如 1.5 = 150%)
focus() => void聚焦编辑器
scrollToPage(n: number) => void滚动到第 n 页
print() => void打印(需先传 onPrint
proposeChange(opts) => booleanw14:paraId 锚定插入一条 tracked 替换(AI 红线的原语)
tsx
const ref = useRef<DocxEditorRef>(null);
await ref.current?.save();              // ArrayBuffer | null
ref.current?.getDocument();             // 当前文档
ref.current?.setZoom(1.5);              // 150%
ref.current?.scrollToPage(3);           // 第 3 页
await ref.current?.loadDocumentBuffer(nextBuffer); // 运行时换文档

四、修订追踪:接受/拒绝命令

接受/拒绝是 @eigenpal/docx-editor-core/prosemirror/commands 导出的 ProseMirror 命令,需对编辑器 view 运行(用 onEditorViewReady 捕获 view):

命令作用
acceptChangeById(revisionId)接受某条修订
rejectChangeById(revisionId)拒绝某条修订
acceptAllChanges()接受全部修订(含结构性表格/列表修订)
rejectAllChanges()拒绝全部修订

枚举修订用 extractTrackedChanges@eigenpal/docx-editor-core/prosemirror/utils/extractTrackedChanges):传入编辑器状态,返回修订条目与「批注→修订」映射。

五、headless 核心(@eigenpal/docx-editor-core/headless

无 DOM、可在 Node/Worker 运行的解析与序列化引擎。

API作用
parseDocx(buffer)解析 .docxDocument
repackDocx(doc)对原始 buffer 选择性回写 → ArrayBuffer(无原 buffer 抛错)
createDocx(doc)从零构建全新包 → ArrayBuffer
serializeDocx(doc)返回 document.xml 字符串(不是 .docx 文件)
getParagraphs / getParagraphText / getBodyText / getBodyWordCount文本读取助手
DocumentAgent链式不可变文档操作(insertText/applyStyle/applyVariables/toBuffer 等)
detectVariables / processTemplate 模板检测与填充(docxtemplater 支撑)
findContentControls / setContentControlContent内容控件(按 tag/alias/id 寻址)查找与填充
createEmptyDocument / createDocumentWithText新建空/带文本文档

六、agents 子路径(@eigenpal/docx-editor-agents

子路径用途
DocxRevieweragentToolsgetToolSchemasexecuteToolCallcreateReviewerBridge
/reactuseDocxAgentToolsuseAgentChat、聊天 UI 组件
/vueuseAgentBridge、Vue 聊天 UI
/server后端路由所需工具 schema(不走 MCP)
/mcpMcpServerrunStdioServer
/ai-sdk/server给 Vercel AI SDK streamTextgetAiSdkTools()
/ai-sdk/react/ai-sdk/vuetoAgentMessages()useChat 输出喂给 <AgentChatLog>

14 个工具:定位 7(read_document/read_selection/read_page/read_pages/find_text/read_comments/read_changes)+ 变更 6(add_comment/reply_comment/resolve_comment/suggest_change/apply_formatting/set_paragraph_style)+ 导航 1(scroll)。


速查完毕,进 指南 · 基础 理解 mode 与修订,或 指南 · 进阶 看协同、headless 与 AI 实战。