Echo Editor 富文本编辑器导出Word文档实战：prosemirror-docx与docx库的落地指南

Echo Editor 富文本编辑器导出Word文档实战prosemirror-docx与docx库的落地指南【免费下载链接】echo-editorA modern WYSIWYG rich-text editor base on tiptap and shadcn-ui项目地址: https://gitcode.com/gh_mirrors/ec/echo-editorEcho Editor 是一款基于 tiptap 和 shadcn-ui 构建的现代化 WYSIWYG 富文本编辑器。本文带你用 prosemirror-docx 与 docx 两个库为它快速落地一键导出 Word 文档能力——只需几十行代码编辑内容就能直接生成 .docx 文件。为什么富文本编辑器需要导出 Word 功能在线编辑的文章、笔记、合同草稿用户常常需要把成果交给同事、打印或线下修改。导出 Word 文档是这类产品的高频刚需而手动全选-复制-粘贴到 Word会丢失图片、列表等排版信息。Echo Editor 的官方示例中就内置了完整的导出方案源码位于 examples/extensions/ExportWord/index.ts整体链路只有三步ProseMirror 文档树 → prosemirror-docx 序列化为 Word 结构 → docx 库打包下载方案解析两个库各负责什么库职责说明prosemirror-docx序列化把 tiptap 的文档树editor.state.doc转换成 Word 文档结构docx打包下载用Packer.toBlob生成真实的 .docx 二进制文件file-saver触发保存调用浏览器原生另存为下载文件依赖关系很清晰DocxSerializer的输出正好是docx库的输入两者天然配套。快速落地四步接入导出 Word第 1 步安装依赖在项目中安装三个包即可prosemirror-docx docx file-saver对应 examples/package.json 中已声明的prosemirror-docx依赖版本号会跟随 tiptap 生态自动对齐。第 2 步配置节点序列化器prosemirror-docx提供了defaultNodes/defaultMarks默认映射只需补充 tiptap 节点名与 OOXML 节点名的差异例如codeBlock→code_blockorderedList→ordered_listimage→ 自定义处理远程图片通过fetch拉取后内嵌进 Word参考实现见 examples/extensions/ExportWord/index.ts 中的nodeSerializer不到 30 行。第 3 步注册 exportToWord 命令通过 tiptap 的addCommands注册一个exportToWord命令核心逻辑只有三行const wordDocument docxSerializer.serialize(editor.state.doc, opts) Packer.toBlob(wordDocument).then(blob saveAs(new Blob([blob]), example.docx))关键点传入getImageBuffer选项prosemirror-docx会回调它获取图片二进制从而把文档中的图片原样嵌入 Word而不是丢失或变成链接。第 4 步在工具栏加一个按钮示例中的 examples/extensions/ExportWord/components/ActionButton.vue 复用了 Echo Editor 自带的ActionButton组件点击即触发editor?.commands.exportToWord()把ExportWord扩展加入编辑器扩展列表见 examples/App.vue 中的ExportWord注册工具栏右侧就会多出导出图标点击自动下载example.docx。效果如何导出哪些内容会保留得益于默认序列化器的覆盖范围以下内容在导出的 Word 文档中都会保留✅ 段落、标题、加粗/斜体/下划线/删除线等文本标记✅ 有序列表、无序列表✅ 代码块、水平分割线✅ 图片自动下载并内嵌加分项和导入 Word 组成完整闭环Echo Editor 还提供了ImportWord扩展src/extensions/ImportWord/ImportWord.ts支持选择 .docx 文件并转回编辑器内容。导入 导出两个能力组合就形成了Word ↔ 在线富文本编辑器的双向工作流非常适合 OA、文档协作类场景。总结给 Echo Editor 添加导出 Word 文档功能并不复杂prosemirror-docx负责把文档树序列化为 Word 结构docx的Packer负责打包成 .docx 文件file-saver负责触发浏览器下载整套官方示例代码集中在examples/extensions/ExportWord/目录可直接复制到自己的项目中使用。掌握这套tiptap prosemirror-docx docx的组合拳后你也能快速给任何 ProseMirror 系富文本编辑器加上文档导出能力。【免费下载链接】echo-editorA modern WYSIWYG rich-text editor base on tiptap and shadcn-ui项目地址: https://gitcode.com/gh_mirrors/ec/echo-editor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考