react 如何向富文本WangeDitor添加文档docx

React本身并不提供向富文本编辑器WangEditor添加文档的功能，但可以通过引入第三方库实现。以下是一种实现方式：

1. 安装 `wangeditor` 和 `jszip` 库

npm install wangeditor jszip

2. 在React组件中引入库

import React, { useEffect, useRef } from 'react';
import WangEditor from 'wangeditor';
import JSZip from 'jszip';

3. 在组件中创建WangEditor实例

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    const editor = new WangEditor(editorRef.current);
    editor.create();
  }, []);

  return (
    <div ref={editorRef}></div>
  );
};

4. 添加上传文档按钮

const MyEditor = () => {
  const editorRef = useRef(null);

  const handleUpload = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = () => {
      const zip = new JSZip();
      zip.loadAsync(reader.result)
        .then((doc) => {
          // 处理文档内容
          const content = doc.file("word/document.xml").async("string");
          return content;
        })
        .then((content) => {
          // 将文档内容添加到富文本编辑器中
          const editor = editorRef.current.editor;
          editor.cmd.do('insertHTML', content);
        });
    };

    reader.readAsArrayBuffer(file);
  };

  useEffect(() => {
    const editor = new WangEditor(editorRef.current);
    editor.create();
  }, []);

  return (
    <>
      <div ref={editorRef}></div>
      <input type="file" onChange={handleUpload} accept=".docx" />
    </>
  );
};

5. 点击上传文档按钮，选择文档后，将文档内容添加到富文本编辑器中。