feat "onlyoffice初步尝试"

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@ant-design/icons": "^5.3.1",
+        "@onlyoffice/document-editor-react": "^1.4.1",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -3299,6 +3300,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@onlyoffice/document-editor-react": {
+      "version": "1.4.1",
+      "resolved": "https://r.cnpmjs.org/@onlyoffice/document-editor-react/-/document-editor-react-1.4.1.tgz",
+      "integrity": "sha512-4Si8Xy0Eh9sH7WukIHJV3kcfkK6WJNK9eKgqTxW4Xz9MQBAh+z6svX2sUptL/Ezz3GuHbsBIEehxZ3PaJJ3Ikg==",
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://r.cnpmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^5.3.1",
+    "@onlyoffice/document-editor-react": "^1.4.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/apis/axios.config.ts

@@ -1,8 +1,11 @@
 import axios from "axios";
 import useStore from "@/store";
 
+const BASEURL = 'http://47.111.23.171:8081'
+// const BASEURL = 'http://localhost:8080'
+
 const axiosInstance = axios.create({
-    baseURL: 'http://localhost:8080',
+    baseURL: BASEURL,
     headers: {
         'Content-Type': 'application/json',
     },

src/apis/editor.ts

@@ -0,0 +1,14 @@
+import axiosInstance from "@/apis/axios.config";
+
+const EDITOR_PREFIX = "/api/onlyoffice"
+
+const editorApis = {
+    triggerForceSave(fileKey: string) {
+        return axiosInstance.post(`${EDITOR_PREFIX}/forcesave`, {
+            "c": "forcesave",
+            "key": fileKey
+        })
+    }
+}
+
+export default editorApis

src/apis/index.ts

@@ -1,10 +1,12 @@
 import userApis from "@/apis/user";
 import testApis from "@/apis/test";
+import editorApis from "@/apis/editor";
 
 
 const apis = {
     ...userApis,
-    ...testApis
+    ...testApis,
+    ...editorApis
 }
 
 const useApis = () => {

src/components/WordEditor/WordEditor.tsx

@@ -0,0 +1,111 @@
+import { DocumentEditor } from "@onlyoffice/document-editor-react";
+import React, {useState} from "react";
+import useStore from "@/store";
+
+interface IProps {
+    onValueChange: (state: boolean) => void;
+}
+
+const WordEditor:React.FC<IProps> = ({onValueChange}) => {
+
+    const store = useStore()
+
+
+    const [data, setData] = useState({
+        documentServerUrl: "http://47.111.23.171:8082/",
+
+        config: {
+            width: '100%',
+            height: '100%',
+            type: 'desktop',
+            documentType: "word",
+            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
+                permissions: {
+                    "chat": false,
+                    "comment": false,
+                    "copy": true,
+                    "deleteCommentAuthorOnly": false,
+                    "download": false,
+                    "edit": true,
+                    "editCommentAuthorOnly": false,
+                    "fillForms": false,
+                    "modifyContentControl": false,
+                    "print": false,
+                    "protect": false,
+                    "review": false,
+                },
+            },
+            editorConfig: {
+                lang: 'zh-CN',
+                callbackUrl: "http://47.111.23.171:8081/api/onlyoffice/callback", // 保存文件的回调函数
+                customization: {
+                    "autosave": false, // 关闭自动保存
+                    "comments": false, // 关闭评论
+                    "compactHeader": true, // 紧凑的header
+                    "compactToolbar": false, // 不启用紧凑的header
+                    "compatibleFeatures": false,
+                    "forcesave": true, //强制保存
+                    "help": false, // 隐藏帮助界面
+                    "hideRightMenu": true, // TODO 无效
+                    "hideRulers": true, // 隐藏标尺
+                    "macros": false, // 关闭宏
+                    "mentionShare": false,
+                    "mobileForceView": false,
+                    "plugins": false, // 禁用插件
+                    "toolbarHideFileName": true,
+                    "toolbarNoTabs": false,
+                    "uiTheme": "theme-light", // 编辑页面的主题色
+                },
+                // TODO 替换成系统用户信息
+                "user": { // 启用用户信息
+                    "id": store.user.id+"", // 4
+                    "name": store.user.name // 5
+                },
+            },
+        },
+    });
+
+    const onDocumentReady = function (event: any) {
+        console.log("Document is loaded");
+    };
+
+    const onLoadComponentError = (errorCode: number, errorDescription: string) => {
+        switch (errorCode) {
+            case -1: // Unknown error loading component
+                console.log(errorDescription);
+                break;
+
+            case -2: // Error load DocsAPI from http://documentserver/
+                console.log(errorDescription);
+                break;
+
+            case -3: // DocsAPI is not defined
+                console.log(errorDescription);
+                break;
+        }
+    };
+
+    const onDocumentStateChange = (event: any) => {
+        onValueChange(event.data)
+    }
+
+    return (
+        <>
+            <DocumentEditor
+                id="docxEditor"
+                documentServerUrl={data.documentServerUrl}
+                config={data.config}
+                events_onDocumentReady={onDocumentReady}
+                onLoadComponentError={onLoadComponentError}
+                events_onDocumentStateChange={onDocumentStateChange}
+            ></DocumentEditor>
+        </>
+    )
+}
+
+export default WordEditor;

src/index.css

@@ -10,4 +10,4 @@ body, html, #root {
 :root {
     --main-color: #1677ff;
     --boder-color: #d5d5d5;
-}
+}

src/pages/Test/Test.module.scss

@@ -0,0 +1,13 @@
+.container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+
+  .editor-box {
+    width: 1000px;
+    height: 100%;
+    min-height: 800px;
+  }
+}

src/pages/Test/Test.tsx

@@ -0,0 +1,53 @@
+import WordEditor from "@/components/WordEditor/WordEditor";
+import styles from "./Test.module.scss"
+import useApis from "@/apis";
+import {useNavigate} from "react-router";
+import {useState} from "react";
+import {Modal} from "antd";
+
+const Test = () => {
+
+    const apis = useApis()
+
+    const nav = useNavigate()
+
+    const [isModified, setIsModified] = useState(false)
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const showModal = () => {
+        setIsModalOpen(true);
+    };
+
+    const handleOk = () => {
+        setIsModalOpen(false);
+    };
+
+    const handleCancel = () => {
+        setIsModalOpen(false);
+    };
+
+    const handleClick = () => {
+        if (isModified) showModal()
+        else nav("/")
+    }
+
+    const handleValueChange = (state: boolean)=> {
+        setIsModified(state)
+    }
+
+    return (
+        <div className={styles.container}>
+            <div className={styles["editor-box"]}>
+                <WordEditor onValueChange={handleValueChange}></WordEditor>
+            </div>
+            <button onClick={handleClick}>提交</button>
+            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+                <p>Some contents...</p>
+                <p>Some contents...</p>
+                <p>Some contents...</p>
+            </Modal>
+        </div>
+    )
+}
+
+export default Test;

src/router/index.tsx

@@ -2,6 +2,7 @@ import {createBrowserRouter} from "react-router-dom";
 import App from "@/pages/App";
 import LoginPage from "@/pages/LoginPage/LoginPage";
 import Sign from "@/pages/Sign/Sign"
+import Test from "@/pages/Test/Test";
 
 const router = createBrowserRouter([
     {
@@ -15,6 +16,10 @@ const router = createBrowserRouter([
     {
         path: '/sign',
         element: <Sign/>
+    },
+    {
+        path: '/test',
+        element: <Test></Test>
     }
 ])
 

src/store/index.ts

@@ -10,7 +10,10 @@ interface IUseStore {
 
 
 const useStore = create<IUseStore>(set => ({
-    user: {} as IUser,
+    user: {
+        id: 123125345,
+        name: "苏韬叡"
+    } as IUser,
     token: '',
     setToken: (token: string) => set(() => ({ token })),
     setUser: (user: IUser) => set(() => ({ user }))

yarn.lock

@@ -1721,6 +1721,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@onlyoffice/document-editor-react@^1.4.1":
+  version "1.4.1"
+  resolved "https://r.cnpmjs.org/@onlyoffice/document-editor-react/-/document-editor-react-1.4.1.tgz"
+  integrity sha512-4Si8Xy0Eh9sH7WukIHJV3kcfkK6WJNK9eKgqTxW4Xz9MQBAh+z6svX2sUptL/Ezz3GuHbsBIEehxZ3PaJJ3Ikg==
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://r.cnpmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz"
@@ -8896,7 +8901,7 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@*, react-dom@^18.0.0, react-dom@^18.2.0, react-dom@>=16.0.0, react-dom@>=16.11.0, react-dom@>=16.8, react-dom@>=16.9.0, react-dom@>=17.0.2:
+react-dom@*, "react-dom@^16.9.0 || ^17 || ^18", react-dom@^18.0.0, react-dom@^18.2.0, react-dom@>=16.0.0, react-dom@>=16.11.0, react-dom@>=16.8, react-dom@>=16.9.0, react-dom@>=17.0.2:
   version "18.2.0"
   resolved "https://r.cnpmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -9004,7 +9009,7 @@ react-scripts@^5.0.0, react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-react@*, "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=16.0.0, react@>=16.11.0, react@>=16.8, react@>=16.9.0, react@>=17.0.2:
+react@*, "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17 || ^18", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=16.0.0, react@>=16.11.0, react@>=16.8, react@>=16.9.0, react@>=17.0.2:
   version "18.2.0"
   resolved "https://r.cnpmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==