React uchun ochiq kodli WYSIWYG DOCX tahrirlovchi

Ochiq kodli WYSIWYG DOCX tahrirlovchi React uchun yaratilgan. Bu tahrirlovchi .docx fayllarni brauzerda ochish, tahrirlash va saqlash imkonini beradi. Shuningdek, u serverga ulanish talab qilmaydi.

Tahrirlovchi xususiyatlari

• WYSIWYG tahrirlash Microsoft Word muvofiqligi bilan
• Matn va paragraf formatlash (bold, italic, shriftlar, ranglar, tekislash, interval)
• Jadval, rasm, giperhavola qo'shish
• Kengaytiriladigan plagin arxitekturasi
• Bekor qilish/ qayta qilish, topish va almashtirish, klaviatura yorliqlari
• Chop ko'rinishi
• Serverga ulanish talab qilinmaydi

Ishlatish

Tahrirlovchini ishlatish uchun quyidagi kodni bajarish kerak:

npm install @eigenpal/docx-js-editor

Keyin, tahrirlovchini React komponentida ishlatish mumkin:

import { useRef } from 'react';
import { DocxEditor, type DocxEditorRef } from '@eigenpal/docx-js-editor';

function Editor({ file }: { file: ArrayBuffer }) {
  const editorRef = useRef(null);

  const handleSave = async () => {
    const buffer = await editorRef.current?.save();
    if (buffer) {
      // Faylni saqlash
    }
  };

  return (
    <>
      <button onClick={handleSave}>Saqlash</button>
      <DocxEditor ref={editorRef} documentBuffer={file} onChange={() => {}} />
    </>
  );
}

Plaginlar

Tahrirlovchi plaginlar yordamida kengaytirilishi mumkin. Plaginlar ProseMirror plaginlari, yon panellar, hujjat qoplamalari va maxsus CSS qo'shish imkonini beradi.

import { DocxEditor, PluginHost, templatePlugin } from '@eigenpal/docx-js-editor';

function Editor({ file }: { file: ArrayBuffer }) {
  return (
    <PluginHost plugins={[templatePlugin]}>
      <DocxEditor documentBuffer={file} />
    </PluginHost>
  );
}

Plaginlar haqida batafsil ma'lumot docs/PLUGINS.md da keltirilgan.