docx-editor 免費的開源文檔編輯器 - 類似word編輯器的js 開源庫 - vue/react文檔編輯器開源框架 - AI Agent 驅動的免費開源文檔編輯器 - docx-editor.js

立即在線體驗 GitHub 倉庫

核心特點與優勢

AI Agent 智能驅動

深度集成 AI 輔助，支持上下文感知寫作、文本自動續寫、智能語法潤色、內容大綱總結及結構化文檔自動生成，讓你的文檔編寫事半功倍。

原生 OOXML 數據模型

拒絕“Word -> HTML -> Word”的損耗性轉換。我們直接解析並操作 Office Open XML 原生規範，100% 映射 Word 文檔的底層結構，杜絕樣式丟失。

100% 瀏覽器客戶端運行

無需配置或部署任何複雜昂貴的後台渲染伺服器，完全在瀏覽器端運行。提供優秀的載入回應時間與離線可用性，完全隔離並保障文檔的數據隱私安全。

專業級文檔編輯能力

極致的所見即所得 (WYSIWYG) 體驗。支持變更修訂追蹤 (Track Changes)、帶回覆的文檔批註評論 (Comments)、複雜的表格與格式排版、圖像插入等。

開源免費與商用友好

基於寬鬆的 Apache 2.0 開源許可，完全免費。完美支持商業專案使用（可商用），即使修改了編輯器代碼也無需強制開源您的商業專有系統。

可擴展插件化架構

提供清晰、鬆耦合的插件化設計，開發者可隨心所欲自定義工具欄選項、擴展編輯器命令和攔截核心編輯事件，保障二次開發的廣度與深度。

典型應用場景

自研 AI 文檔編輯器

借助 docx-editor 強大的純客戶端運行能力與可定制 API，企業可以快速構建專有的 AI 寫作協同系統。無縫對接私有部署或垂直領域的 LLM 大模型，擺脫對第三方雲服務的依賴，極致確保敏感文檔在編寫過程中的隱私安全。

行業知識庫深度融合 (RAG)

通過與企業內部垂直知識庫、法律法規資料庫以及專有詞庫的深度融合，實現在編輯文檔的同時進行即時語義檢索。AI 助手可以根據行業知識背景提供高度精準的內容校對、合規性提示以及術語參考。

高價值商業文檔與合同編輯

在法律、金融、政企等行業中，快速起草並精準校對合同文案至關重要。借助該編輯器對 Office 原生格式 (OOXML) 的 100% 格式無損還原能力，AI 可以智能識別合同中的漏洞與風險條款，大幅度壓縮審核週期，降低企業營運風險。

TECHNICAL SELECTION

為什麼說它是自研 AI 編輯器的最佳選擇？

當企業決定自研或引入一個 AI 文檔編輯器时，技術選型至關重要。基於底層架構的獨特性，docx-editor 能夠完美解決開發效率、相容性與智能化深度的難題。

極致敏捷：快速交付上線

開箱即用的模組化設計，提供官方支持的 React 和 Vue 3 適配器。開發者無需花大量時間研究底層排版引擎，即可在幾天內將成熟的 Word 在線編輯與 AI 協作機制無縫對接到企業已有的業務系統中。

全端覆蓋：多客戶端自由集成

基於標準的前端 Web 技術構建。編寫一次組件，即可無縫集成在 PC 電腦網頁、手機行動端網頁（完美的觸控手勢互動），或通過 WebView/Electron 技術整合至原生 App 客戶端（手機 App/桌面客戶端）。

Word 零摩擦相容：用戶上手無痛

採用標準的 DOCX 二進位格式作為流轉模型。對企業中的行政、法務、策劃等普通員工極度親和，完全保持與 Microsoft Word 的格式相容，規避了由於 HTML 轉換造成的版式崩塌，直接承接企業既有資產。

深度 AI 驅動：精細控墨與富文本編排

打破傳統“純文本 AI 聊天框”的限制。AI 助手可以直接通過 API 精細且準確地操控文檔底部的文字樣式、列表級數、表格合併、段落縮進等豐富複雜的富文本版式，實現真正的智能編輯。

REAL-TIME COLLABORATION

毫秒級即時協同編輯

docx-editor 原生集成了 Yjs (CRDT 協同數據模型)，支持多人在線協同編輯同份 Word 文檔，狀態即時同步：

多人光標即時高亮展示，編輯路徑一目了然
基於 CRDT 衝突自動調和演算法，無需加鎖，保障離線編輯與合併
靈活的協同連接器，輕鬆對接 WebSockets、WebRTC 或自定義網關

SERVER-SIDE HEADLESS

Headless 無 DOM 渲染與處理

引擎在設計上將內核與 UI 視圖分離開來。這使得您能夠在 Node.js 或命令行等非瀏覽器环境中高效加載並操作 Word 文件：

在伺服器端批量注入變量、填充模板、生成自動化報告
無需任何虛擬瀏覽器環境 (如 Puppeteer/JSDOM)，運行效率極高
通過插件擴展，支持從命令行或後端伺服器進行文檔的快速預渲染

同類開源庫對比

我們深知企業在面對開源選擇時的慎重。以下是 docx-editor 與同類知名開源編輯器 SuperDoc 的關鍵差異對比：

對比維度	docx-editor	SuperDoc
開源許可協議 (商用門檻)	Apache 2.0 (極度寬鬆) 完全免費商用，即使修改了源碼也無需開源您的商業業務代碼，0 商業授權風險與成本。	AGPL 3.0 (傳染性強) 只要通過網路提供服務就必須強制開源您的整個商業系統代碼，若閉源使用須購買昂貴的商業授權。
中日韓 (CJK) 輸入法支援	已適配中日韓輸入法打字底層對鍵盤 IME (中文、日文、韓文拼音輸入法) 進行深度事件攔截與組合優化，打字順暢，絕無拼音殘留和光標亂跳。	體驗不佳 (存在嚴重 Bug) 在進行中文/日文/韓文打字輸入時，由於 Composition 組合事件處理不完善，經常導致拼音殘留、文字重複亂碼及光標錯亂。
核心完成度與穩定性	高度成熟提供原生 Yjs 協同衝突調和，核心模組與 UI 層徹底解耦，經歷過複雜生產環境驗證，功能穩定成熟。	開發進行中部分高級富文本格式仍處於實驗性階段，離線合併與複雜排版的穩定性仍需疊代驗證。

快速集成到您的項目

React 集成 Vue 3 集成

1. 安裝 React 適配器包與相關依賴

# 安裝最新穩定的 React 版本 docx-editor 依賴
npm install @eigenpal/docx-editor-react

2. 在組件中引入並進行配置

import React, { useState } from 'react';
import { DocxEditor } from '@eigenpal/docx-editor-react';
// 引入樣式文件確保工具欄和編輯區域表現正確
import '@eigenpal/docx-editor-react/styles.css';

function DocumentWorkspace() {
  const [docBuffer, setDocBuffer] = useState(null);

  const handleSave = (updatedBuffer) => {
    // updatedBuffer 是修改後的 Word 原生二進位數據 (ArrayBuffer)
    console.log('文檔數據更新：', updatedBuffer);
  };

  return (
    <div style={{ height: '80vh', border: '1px solid rgba(255,255,255,0.08)' }}>
      <DocxEditor
        documentBuffer={docBuffer}
        onSave={handleSave}
      />
    </div>
  );
}

export default DocumentWorkspace;

1. 安裝 Vue 3 適配器包與依賴

# 安裝針對 Vue 3 設計的封裝包
npm install @eigenpal/docx-editor-vue

2. 創建 Vue 編輯器組件

<template>
  <div class="editor-container">
    <DocxEditor
      :documentBuffer="docBuffer"
      @save="handleSave"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { DocxEditor } from '@eigenpal/docx-editor-vue';
// 引入對應的 CSS 文件以正常渲染編輯器介面
import '@eigenpal/docx-editor-vue/styles.css';

const docBuffer = ref(null);

const handleSave = (updatedBuffer) => {
  // 捕獲最新的 .docx ArrayBuffer 數據，在此提交保存到雲端或本地
  console.log('Vue 端接收到文檔更新：', updatedBuffer);
};
</script>

<style scoped>
.editor-container {
  height: 80vh;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
</style>