狂揽2.1K Star！基于Claude Code开发的神器，这款开源在线编辑器太强了

OpenNiuma

发布于 2026-07-20 14:02:47

250

Web业务嵌入文档编辑功能长期存在格式错乱、数据上传泄露、AI联动困难三类痛点。docx-editor采用原生OOXML解析架构，纯前端完成docx读写，配套完整AI Agent交互工具，适配主流前端框架，开源协议允许商用开发，大幅降低在线文档模块开发成本。

📌 一、项目核心亮点

✨ 1.1 核心架构优势

特性	详细说明
原生格式解析	不经过HTML中转，直接读写OOXML标准，导出文档在Word打开无排版丢失
纯客户端运行	文件数据仅留存浏览器本地，无需后端中转，减少隐私泄露风险
全框架适配	独立核心引擎，配套React/Vue/Nuxt三套官方适配器
商用友好协议	Apache 2.0开源，无商用版权限制
AI原生集成	内置14套文档操作工具，兼容MCP、各类大模型SDK

✨ 1.2 常规文档能力

完整文字排版：字体、高亮、多级列表、分页、页眉页脚全兼容；
表格处理：支持合并单元格、浮动图文、批量数据填充；
审阅体系：修订追踪、线程式批注，每条修改可单独采纳/驳回；
多人协同：基于Yjs对接实时同步，实时光标与评论互通；
多语言界面：内置9种地区语言包，轻量化按需加载。

✨ 1.3 AI联动特色能力

区别普通在线编辑器，该项目配套独立Agent工具包，大模型可直接定位段落、插入批注、生成修改建议，依靠Word原生paraId稳定定位文本，多轮对话不会出现内容错位。同时支持三种运行模式：网页实时交互、服务端批量审阅、MCP标准化服务对接，适配代码智能体自动审稿场景。

📌 二、快速安装部署

✨ 2.1 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';

export default function EditorDemo() {
  const [fileBuf, setFileBuf] = useState(null);
  const upload = async (e) => {
    const file = e.target.files[0];
    setFileBuf(await file.arrayBuffer());
  };
  return (
    <>
      <input type="file" accept=".docx" onChange={upload}/>
      {fileBuf && <DocxEditor documentBuffer={fileBuf} mode="editing"/>}
    </>
  )
}

✨ 2.2 Vue 3接入

npm install @eigenpal/docx-editor-vue

模板代码

<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor } from '@eigenpal/docx-editor-vue';
import '@eigenpal/docx-editor-vue/styles.css';
const buffer = ref(null);
async function loadDoc(e) {
  const f = e.target.files[0];
  buffer.value = await f.arrayBuffer();
}
</script>
<template>
  <input accept=".docx" type="file" @change="loadDoc"/>
  <DocxEditor v-if="buffer" :document-buffer="buffer"/>
</template>

✨ 2.3 Nuxt专用模块

npm install @eigenpal/nuxt-docx-editor

仅需在配置文件注册，自动处理客户端渲染，无需额外包装组件

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@eigenpal/nuxt-docx-editor']
})

📌 三、AI Agent配置实操

✨ 3.1 前端对话联动

引入配套Agent钩子，将文档操作工具注入AI对话链路，模型可自动读取全文、标注修改意见

import { useRef } from 'react';
import { DocxEditor } from '@eigenpal/docx-editor-react';
import { useDocxAgentTools } from '@eigenpal/docx-editor-agents';
import { useChat } from '@ai-sdk/react';

export function AIDocEditor() {
  const editorRef = useRef(null);
  const agentTools = useDocxAgentTools(editorRef);
  const chat = useChat({ tools: agentTools });
  return <Docx ref={editorRef} documentBuffer={buffer}/>
}

✨ 3.2 服务端批量审阅

无头模式无需浏览器环境，Node中直接解析文档批量校验合同、报告，适配CI自动化文档审查流程。

✨ 3.3 MCP服务暴露

工具可封装为标准MCP服务，Cursor、Claude Code等编程智能体可远程调用文档读写、批注能力，实现代码生成后同步撰写配套需求文档。

📌 四、适用业务场景

✨ 4.1 企业SaaS系统

合同审批平台、报价系统、内部OA文档模块，用户在线修改文件无需下载上传，修订痕迹完整留存用于审核溯源。

✨ 4. 内容创作工具

简历生成、报告模板填充、自媒体稿件在线润色，搭配AI自动梳理逻辑、修正表述，无需切换第三方文档软件。

✨ 研发智能体配套

代码项目配套需求文档、接口说明自动生成，AI写完逻辑后同步生成标准化Word交付材料，减少人工复制粘贴。

✨ 法律金融类业务

合规文件、协议编辑，严格保留每一处修改记录，满足行业文档留痕规范。

📌 五、同类工具横向对比

工具	解析方式	是否纯前端	AI原生支持	商用授权	包体积
docx-editor	原生OOXML	是	完整14套工具	Apache2.0	轻量分拆
Syncfusion DocIO	HTML中转	否	仅基础生成	付费商业	大体积套件
Tiptap	HTML转换	是	无原生文档工具	开源	仅基础文本
OnlyOffice组件	云端渲染	否	第三方插件	AGPL	服务依赖