feat "onlyoffice编辑器组件抽取"

src/components/WordEditor/WordEditor.tsx

@@ -4,9 +4,12 @@ import useStore from "@/store";
 
 interface IProps {
     onValueChange: (state: boolean) => void;
+    key: string;
+    title: string;
+    url: string;
 }
 
-const WordEditor:React.FC<IProps> = ({onValueChange}) => {
+const WordEditor:React.FC<IProps> = ({onValueChange, key, title, url}) => {
 
     const store = useStore()
 
@@ -22,9 +25,9 @@ const WordEditor:React.FC<IProps> = ({onValueChange}) => {
             mode: 'edit',
             document: {
                 fileType: "docx",
-                key: "13412453353_123524534324", // 1
-                title: "13412453353_123524534324.docx", //2
-                url: "http://eai-files.oss-cn-shanghai.aliyuncs.com/13412453353_123524534324.docx", // 3
+                key, // 1
+                title, //2
+                url, // 3
                 permissions: {
                     "chat": false,
                     "comment": false,

src/pages/Home/component/Edit/index.tsx

@@ -5,6 +5,7 @@ import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
 import { Editor, Toolbar } from '@wangeditor/editor-for-react';
 import { Typography } from 'antd';
 import { useEffect, useState } from 'react';
+import WordEditor from "@/components/WordEditor/WordEditor";
 
 const editorConfig: Partial<IEditorConfig> = {
   placeholder: '请输入内容...',
@@ -18,7 +19,10 @@ export function Edit() {
 
   const [editor, setEditor] = useState<IDomEditor | null>(null);
 
-  const [html, setHtml] = useState('');
+  const [isModified, setIsModified] = useState(false)
+  const handleValueChange = (state: boolean)=> {
+    setIsModified(state)
+  }
 
   useEffect(() => {
     return () => {
@@ -48,22 +52,12 @@ export function Edit() {
       <div className="edit-box">
         <div>编辑区</div>
         <div className="edit-root">
-          <Toolbar
-            editor={editor}
-            defaultConfig={toolbarConfig}
-            mode="default"
-            style={{ borderBottom: '1px solid #ccc' }}
-          />
-          <div className="edit-toolbar-box">
-            <Editor
-              value={html}
-              defaultConfig={editorConfig}
-              onCreated={setEditor}
-              onChange={(editor) => setHtml(editor.getHtml())}
-              mode="default"
-              style={{ height: '300px', overflowY: 'hidden' }}
-            />
-          </div>
+          <WordEditor
+              onValueChange={handleValueChange}
+              key={"13412453353_123524534324"}
+              title={"13412453353_123524534324.docx"}
+              url={"http://eai-files.oss-cn-shanghai.aliyuncs.com/13412453353_123524534324.docx"}
+          ></WordEditor>
         </div>
         <div className="button-right">
           <Button>只能批改</Button>

src/pages/Test/Test.tsx

@@ -38,7 +38,12 @@ const Test = () => {
     return (
         <div className={styles.container}>
             <div className={styles["editor-box"]}>
-                <WordEditor onValueChange={handleValueChange}></WordEditor>
+                <WordEditor
+                    onValueChange={handleValueChange}
+                    key={"13412453353_123524534324"}
+                    title={"13412453353_123524534324.docx"}
+                    url={"http://eai-files.oss-cn-shanghai.aliyuncs.com/13412453353_123524534324.docx"}
+                ></WordEditor>
             </div>
             <button onClick={handleClick}>提交</button>
             <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>

src/router/index.tsx

@@ -3,6 +3,7 @@ import App from "@/pages/App";
 import LoginPage from "@/pages/LoginPage/LoginPage";
 import Sign from "@/pages/Sign/Sign"
 import Test from "@/pages/Test/Test";
+import {Edit} from "@/pages/Home/component/Edit";
 
 const router = createBrowserRouter([
     {
@@ -20,6 +21,10 @@ const router = createBrowserRouter([
     {
         path: '/test',
         element: <Test></Test>
+    },
+    {
+        path: '/edit',
+        element: <Edit></Edit>
     }
 ])