docx-editor — editor dokumen open-source gratis. Perpustakaan JS seperti Word, kerangka editor dokumen Vue/React bertenaga agen AI — docx-editor.js

Fitur Utama dan Keunggulan

Dukungan Agen AI yang Cerdas

Integrasi mendalam dengan AI untuk penulisan berbasis konteks, penyelesaian teks otomatis, koreksi tata bahasa cerdas, ringkasan konten, dan pembuatan dokumen terstruktur.

Model Data OOXML Asli

Tidak ada konversi yang merugikan seperti 'Word -> HTML -> Word'. Kami bekerja langsung dengan spesifikasi Office Open XML, memetakan 100% struktur dokumen Word dan mencegah kehilangan gaya.

Berjalan 100% di Sisi Klien

Berjalan sepenuhnya di browser tanpa server rendering yang rumit. Menawarkan waktu pemuatan cepat, fungsi offline, dan privasi data mutlak.

Pengeditan Dokumen Profesional

Pengalaman WYSIWYG lengkap. Mendukung pelacakan perubahan (Track Changes), komentar dengan balasan (Comments), tabel kompleks, pemformatan, gambar, dan lainnya.

Open-Source dan Ramah Komersial

Di bawah lisensi Apache 2.0: sepenuhnya gratis dan cocok untuk penggunaan komersial. Modifikasi kode tidak mewajibkan Anda untuk mempublikasikan kode sumber sistem Anda.

Arsitektur Plugin yang Dapat Diperluas

Desain modular dengan sistem plugin yang fleksibel. Developer dapat dengan mudah menyesuaikan bilah alat dan memperluas perintah editor.

Skenario Penggunaan Umum

Editor Dokumen AI Milik Sendiri

Berkat operasi sisi klien, perusahaan dapat dengan cepat membangun editor dokumen mereka sendiri dengan AI, mengintegrasikan LLM lokal untuk privasi data mutlak.

Integrasi dengan Basis Pengetahuan (RAG)

Integrasi dengan basis pengetahuan internal memungkinkan pencarian semantik selama pengeditan. Asisten AI menawarkan koreksi dan rekomendasi istilah.

Dokumen Komersial dan Kontrak

Penyusunan dan pemeriksaan kontrak yang cepat. Berkat kompatibilitas OOXML 100%, AI dapat mengidentifikasi risiko dalam kontrak dan mempercepat waktu persetujuan.

PILIHAN TEKNIS

Mengapa Ini Pilihan Terbaik untuk Editor AI Anda?

Saat memilih editor dokumen, arsitektur adalah hal yang krusial. Berkat struktur uniknya, docx-editor memecahkan masalah efisiensi pengembangan, kompatibilitas, and integrasi AI.

Pengembangan dan Peluncuran Cepat

Adapter siap pakai untuk React dan Vue 3. Developer tidak perlu mempelajari mesin rendering — integrasi hanya memakan waktu beberapa hari.

Integrasi Multi-Platform

Dibangun dengan teknologi web standar. Satu komponen terintegrasi pada PC, seluler (dengan dukungan gerakan sentuh), dan aplikasi native melalui WebView/Electron.

Kompatibilitas Word Tanpa Hambatan

Penggunaan format DOCX mencegah kesalahan pemformatan. Kompatibilitas penuh dengan Microsoft Word memberikan antarmuka yang familier bagi karyawan.

Kontrol Tata Letak Tingkat Lanjut untuk AI

Berbeda dengan chatbot teks sederhana, asisten AI dapat mengelola gaya teks, daftar, sel tabel, dan indentasi langsung melalui API.

KOLABORASI REAL-TIME

Kolaborasi Real-Time

docx-editor memiliki integrasi bawaan dengan Yjs (model data CRDT), memungkinkan beberapa pengguna mengedit file Word yang same secara bersamaan:

Menampilkan kursor dan pilihan pengguna lain secara real-time
Resolusi konflik otomatis berbasis CRDT tanpa penguncian file untuk kerja offline
Konektor fleksibel untuk koneksi mudah melalui WebSockets, WebRTC, atau gateway Anda sendiri

SERVER-SIDE HEADLESS

Mode Headless Server Tanpa DOM

Arsitektur memisahkan inti dari antarmuka, memungkinkan Anda memproses dokumen Word di lingkungan Node.js atau CLI tanpa browser:

Menginjeksi variabel, mengisi templat, dan membuat laporan di server
Tidak memerlukan browser virtual (seperti Puppeteer/JSDOM), menjamin kecepatan tinggi
Ekstensi dengan plugin untuk rendering dokumen cepat dari CLI atau backend

Perbandingan dengan Alternatif

Perbandingan perbedaan utama antara docx-editor dan editor sejenis SuperDoc:

Kriteria	docx-editor	SuperDoc
Lisens (Penggunaan Komersial)	Apache 2.0 (sangat longgar) Sepenuhnya gratis untuk penggunaan komersial. Modifikasi kode tidak mewajibkan Anda mempublikasikan software Anda, 0 risiko.	AGPL 3.0 (lisensi ketat) Saat menyediakan layanan melalui jaringan, Anda wajib mempublikasikan kode dari seluruh sistem komersial Anda.
Dukungan CJK (Bahasa Asia)	Dukungan Penuh Input CJK Optimasi peristiwa keyboard IME untuk bahasa Mandarin, Jepang, dan Korea menjamin input yang lancar tanpa kesalahan.	Kurang Memuaskan (bug kritis) Karena pemrosesan acara Composition yang tidak lengkap, sering terjadi penggandaan karakter dan kesalahan kursor pada input CJK.
Stabilitas dan Kematangan	Kematangan Tinggi Kolaborasi bawaan berbasis Yjs, pemisahan total antara inti dan UI, stabilitas terbukti di lingkungan produksi.	Dalam Pengembangan Beberapa fungsi pemformatan lanjutan masih eksperimental; pengembangan stabilitas lebih lanjut diperlukan.

Integrasi Cepat ke Proyek Anda

Integrasi React Integrasi Vue 3

1. Instal adaptor React dan dependensi

# Instal versi stabil terbaru dari adaptor React
npm install @eigenpal/docx-editor-react

2. Impor dan konfigurasikan di komponen

import React, { useState } from 'react';
import { DocxEditor } from '@eigenpal/docx-editor-react';
// Impor gaya untuk bilah alat dan area pengeditan
import '@eigenpal/docx-editor-react/styles.css';

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

  const handleSave = (updatedBuffer) => {
    // updatedBuffer adalah data biner Word yang diperbarui (ArrayBuffer)
    console.log('Dokumen diperbarui:', 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. Instal adaptor Vue 3 dan dependensi

# Instal paket yang dirancang khusus untuk Vue 3
npm install @eigenpal/docx-editor-vue

2. Membuat komponen 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';
// Impor file CSS untuk antarmuka editor
import '@eigenpal/docx-editor-vue/styles.css';

const docBuffer = ref(null);

const handleSave = (updatedBuffer) => {
  // Menangkap ArrayBuffer untuk disimpan di server atau lokal
  console.log('Dokumen diperbarui di Vue:', updatedBuffer);
};
</script>

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