docx-editor
Trình chỉnh sửa tài liệu mã nguồn mở miễn phí

1. Cài đặt gói bộ điều hợp React và các phụ thuộc

# Cài đặt phụ thuộc docx-editor phiên bản React ổn định mới nhất
npm install @eigenpal/docx-editor-react

2. Nhập và định cấu hình trong thành phần

import React, { useState } from 'react';
import { DocxEditor } from '@eigenpal/docx-editor-react';
// Nhập tệp kiểu dáng để đảm bảo thanh công cụ và khu vực chỉnh sửa hiển thị đúng
import '@eigenpal/docx-editor-react/styles.css';

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

  const handleSave = (updatedBuffer) => {
    // updatedBuffer là dữ liệu nhị phân Word gốc đã sửa đổi (ArrayBuffer)
    console.log('Cập nhật dữ liệu tài liệu:', updatedBuffer);
  };

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

export default DocumentWorkspace;