开发者生态
morning
Show HN:用于构建文档应用程序的开源 .docx 编辑器库
2026-05-21
1 阅读
thisisjedr
适用于 React 和 Vue 的开源 WYSIWYG .docx 编辑器,具有规范的 OOXML、跟踪更改和实时协作。代理就绪。现场演示 |文档快速入门 npm install @eigenpal/docx-editor-react 请参阅下面的 React 快速入门。 npm install @eigenpal/docx-editor-vue 请参阅下面的 Vue 快速入门。 npm install @eigenpal/nuxt-docx-editor 请参阅下面的 Nuxt 快速入门。包 包 描述 文档 @eigenpal/docx-editor-react React 适配器。工具栏、分页编辑器、插件。文档@eigenpal/docx-editor-vue Vue 3 适配器。工具栏、分页编辑器、插件。文档 @eigenpal/nuxt-docx-editor Nuxt 3 和 4 模块包装了 Vue 适配器。文档 @eigenpal/docx-editor-core 与框架无关的核心:OOXML 解析器、序列化器、布局引擎、ProseMirror 模式。如果您分叉 React 或 Vue 适配器,请依赖于此。文档 @eigenpal/docx-editor-i18n 两个适配器使用的共享区域设置字符串和类型。文档 @eigenpal/docx-editor-agents 代理 SDK 和聊天 UI:与框架无关的桥、MCP 服务器、AI SDK 适配器以及 UI 组件。文档 分叉适配器?保持你的叉子薄。直接依赖 @eigenpal/docx-editor-core,以便解析器、序列化器和渲染修复自动进入您的构建,而无需手动向后移植每个上游更改。 React import { useState } from 'react' ;从 '@eigenpal/docx-editor-react' 导入 { DocxEditor } ;导入 '@eigenpal/docx-editor-react/styles.css' ;导出函数 App ( ) { const [ buffer , setBuffer ] = useState < ArrayBuffer |空 > ( 空 ) ; return ( < > < input type = "file"accept = ".docx" onChange = { async ( e ) => setBuffer ( ( wait e . target . files ?. [ 0 ] ?. arrayBuffer ( ) ) ?? null ) } /> { buffer && < DocxEditor documentBuffer = { buffer } mode = "编辑" /> } > ) ; Next.js / SSR:使用动态导入。编辑器需要 DOM。完整文档:packages/react · API 参考。 Vue < script setup lang="ts"> import { ref } from ' vue ' ;从 '@eigenpal/docx-editor-vue' 导入 { DocxEditor } ;导入'@eigenpal/docx-editor-vue/styles.css'; const 缓冲区 = ref < ArrayBuffer |空 >( 空 );异步函数 loadFile( e : Event ) { const file = ( e .target as HTMLInputElement ).文件?.[ 0 ];缓冲 。值=文件?等待文件。 arrayBuffer():空; } script > < template > < input type = " file "accept = " .docx " @change = " loadFile " /> < DocxEditor v-if = " buffer " :document-buffer = " buffer " mode = " Editing " /> template > 完整文档:packages/vue · API 参考。 Nuxt // nuxt.config.ts 导出默认的defineNuxtConfig ( { module : [ '@eigenpal/nuxt-docx-editor' ] , } ) ; @eigenpal/nuxt-docx-editor 将 Vue 适配器包装为 Nuxt 3 和 4 模块:它自动导入 SSR 安全的 组件(无需手动导入,无 包装器)和 Vue 可组合项。完整文档:packages/nuxt。插件从 '@eigenpal/docx-editor-react' 导入 { DocxEditor } ;从 '@eigenpal/docx-editor-react/plugin-api' 导入 { PluginHost , templatePlugin } ; < PluginHost plugins = { [ templatePlugin ] } > < DocxEditor documentBuffer = { buffer } /> PluginHost > ;请参阅插件文档以获取完整的插件 API。开发bun安装bun运行dev#localhost:5173bun运行构建bun运行类型检查main的实时预览在latest.docx-editor.dev中自动部署——对于在将更改发送到npm之前尝试更改很有用。示例:Vite | Next.js |混音|天文 |视图 | Nuxt 文档 |道具和参考方法 |插件 |欢迎建筑贡献。请参阅 CONTRIBUTING.md 了解设置、测试和一次性 CLA 签名。翻译 区域设置 语言 en 英语 de 德语 pl 波兰语 pt-BR 葡萄牙语(巴西) tr 土耳其语 he 希伯来语 zh-CN 中文(简体) 帮助将编辑器翻译成您的语言!请参阅完整的 i18n 贡献指南。 Bun run i18n:new de # 脚手架德语语言环境 Bun run i18n:status # 检查翻译覆盖率 商业支持提示 有问题或自定义功能吗?电子邮件 docx-editor@eigenpal.com 。