feat

src/pages/Container/Test/edtior/index.js

@@ -1,34 +1,39 @@
 // App.tsx
-import { useRef, useState } from 'react';
-import { DocxEditor } from '@eigenpal/docx-editor-react';
-import '@eigenpal/docx-editor-react/styles.css';
+import { useRef, useState, useEffect } from "react";
+import { DocxEditor } from "@eigenpal/docx-editor-react";
+import { createEmptyDocument } from "@eigenpal/docx-editor-core";
+import "@eigenpal/docx-editor-react/styles.css";
+import "./index.less";
+
 export default function App() {
   const editorRef = useRef(null);
-  const [file, setFile] = useState(null);
-  async function download() {
-    const buffer = await editorRef.current?.save();
-    if (!buffer) return;
-    const blob = new Blob([buffer], {
-      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = file?.name ?? 'document.docx';
-    a.click();
-    URL.revokeObjectURL(url);
-  }
+  const [currentDocument, setCurrentDocument] = useState(createEmptyDocument());
+  const [documentBuffer, setDocumentBuffer] = useState();
+
+  const chooseWord = () => {
+    fetch(
+      `https://test-dragon-yf-pub.oss-cn-hangzhou.aliyuncs.com/jjb/6a589a40e4b0f40a8d939aa1.docx`,
+    )
+      .then((res) => res.arrayBuffer())
+      .then((buffer) => {
+        setDocumentBuffer(buffer);
+      });
+  };
+
   return (
-    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <div style={{ padding: 8, display: 'flex', gap: 8 }}>
-        <input
-          type="file"
-          accept=".docx"
-          onChange={(e) => setFile(e.target.files?.[0] ?? null)}
-        />
-        <button onClick={download}>Download .docx</button>
+    <div style={{ height: "100vh", display: "flex" }}>
+      <DocxEditor
+        ref={editorRef}
+        document={documentBuffer ? undefined : currentDocument}
+        documentBuffer={documentBuffer}
+        mode="editing"
+        onSave={()=>{
+          console.log('save');
+        }}
+      />
+      <div className="pick-word-container">
+        <div onClick={chooseWord}>文档</div>
       </div>
-      {file && <DocxEditor ref={editorRef} documentBuffer={file} mode="editing" />}
     </div>
   );
-}
+}

src/pages/Container/Test/edtior/index.less

@@ -0,0 +1,4 @@
+.pick-word-container{
+    height: 100%;
+    width: 200px;
+}