merge

package.json

@@ -28,8 +28,10 @@
     "jquery-ui": "^1.12.1",
     "js-audio-recorder": "^1.0.7",
     "jsplumb": "^2.15.5",
+    "lodash.merge": "^4.6.2",
     "luckyexcel": "^1.0.1",
     "moment": "^2.29.1",
+    "onlyoffice-vue": "^1.0.1",
     "qs": "^6.9.1",
     "sass": "^1.46.0",
     "tinymce": "^5.7.1",

src/components/index.js

@@ -0,0 +1,23 @@
+import OnlyofficeEditor from './onlyoffice-editor'
+
+const components = [
+  OnlyofficeEditor
+]
+
+const install = (Vue) => {
+  components.forEach((component) => {
+    Vue.component(component.name, component)
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export {
+  OnlyofficeEditor
+}
+export default {
+  install,
+  version: '1.0.1'
+}

src/components/onlyoffice-editor/index.js

@@ -0,0 +1,3 @@
+import OnlyofficeEditor from './onlyoffice-editor.vue'
+
+export default OnlyofficeEditor

src/components/onlyoffice-editor/onlyoffice-editor.vue

@@ -0,0 +1,140 @@
+
+<template>
+  <div :id="editorId"></div>
+</template>
+
+<script>
+import merge from 'lodash.merge'
+let script
+// 脚本标识
+const scriptId = 'onlyoffice-editor'
+// 异步加载 api.js
+const loadScript = src => new Promise((resolve, reject) => {
+  script = document.querySelector(`#${scriptId}`)
+  // 加载成功
+  const onLoad = () => {
+    resolve()
+    script.removeEventListener('load', onLoad)
+  }
+  // 加载失败
+  const onError = () => {
+    reject(new Error(`脚本 ${src} 加载失败`))
+    script.removeEventListener('error', onError)
+  }
+  if (!script) {
+    script = document.createElement('script')
+    script.id = scriptId
+    script.src = src
+    script.addEventListener('load', onLoad)
+    script.addEventListener('error', onError)
+    document.head.appendChild(script)
+  } else if (window.DocsAPI) {
+    resolve()
+  } else {
+    script.addEventListener('load', onLoad)
+    script.addEventListener('error', onError)
+  }
+})
+export default {
+  name: 'onlyoffice-editor',
+  props: {
+    /**
+     * Onlyoffice 配置项
+     */
+    config: {
+      type: Object,
+      required: true,
+      validator: value => value && Object.prototype.toString.call(value) === '[object Object]' && Object.keys(value).length > 0
+    },
+    /**
+     * Onlyoffice api.js 路径地址
+     */
+    src: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      // 编辑器配置项，完整配置项参见：https://api.onlyoffice.com/editors/config/
+      editorConfig: {
+        // 编辑器宽度
+        width: 1200,
+        // 编辑器高度
+        height: 600,
+        // 编辑器类型，支持 word、cell（表格）、slide（PPT）
+        documentType: 'word',
+        // 文档配置
+        document: {
+          // 权限
+          permissions: {
+            // 启用评论
+            comment: false,
+            // 启用下载
+            download: true,
+            // 启用编辑
+            edit: true,
+            // 启用导出
+            print: true,
+            // 启用预览
+            review: true
+          }
+        },
+        editorConfig: {
+          // 回调地址
+          callbackUrl: this.src,
+          // 设置语言
+          lang: 'zh-CN',
+          // customization 字段相关配置详解：https://api.onlyoffice.com/editors/config/editor/customization
+          customization: {
+            // 强制保存
+            forcesave: true,
+            features: {
+              // 关闭拼写检查
+              spellcheck: false
+            }
+          }
+        }
+      },
+      scriptId,
+      editorId: `editor-${new Date().getTime().toString('32')}`
+    }
+  },
+  watch: {
+    config: {
+      handler () {
+        this.initEditor()
+      },
+      deep: true
+    },
+    src () {
+      this.initEditor()
+    }
+  },
+  mounted () {
+    this.initEditor()
+  },
+  beforeDestroy () {
+    // 组件销毁前销毁编辑器
+    if (this.editor) {
+      this.editor.destroyEditor()
+      this.editor = null
+    }
+  },
+  methods: {
+    // 初始化编辑器
+    initEditor () {
+      loadScript(this.src).then(this.createEditor)
+    },
+    // 创建编辑器
+    createEditor () {
+      if (this.editor) {
+        this.editor.destroyEditor()
+        this.editor = null
+      }
+      this.editor = new window.DocsAPI.DocEditor(this.editorId, merge({}, this.editorConfig, this.config))
+      this.$emit('ready', this.editor)
+    }
+  }
+}
+</script>

src/main.js

@@ -6,6 +6,7 @@ import './plugins';
 import router from './router'
 import store from './store'
 import VueCookie from 'vue-cookie';
+import OnlyofficeEditor from '@/components'
 import App from './App.vue';
 import './assets/mc-inconfont/iconfont.css'
 import fullscreen from 'vue-fullscreen'
@@ -27,6 +28,7 @@ Vue.prototype.common = common
 Vue.prototype.$axios = http //axios 设置
 Vue.use(fullscreen)
 Vue.use(VueCookie);
+Vue.use(OnlyofficeEditor)
 Vue.use(VueContextMenu)
 Vue.config.productionTip = false
 

src/pages/main/onlineOffice/index.vue

@@ -1,67 +1,108 @@
 <template>
-      <myUpload @uploadBack="uploadBack" :fileInfo="fileInfo" :fileList="fileInfo.fileList">
-                        </myUpload>
-    <!-- <DocumentEditor id="docEditor" documentServerUrl="http://documentserver/" :config="config" /> -->
+    <div>
+        <myUpload @uploadBack="uploadBack" :fileInfo="fileInfo" :fileList="fileInfo.fileList">
+        </myUpload>
+        <div id="DocEditor">
+            <onlyoffice-editor editorId="DocEditor" :src="src" :config="config" @ready="onReady" />
+            <!-- <DocumentEditor id="docEditor" :documentServerUrl="src" :config="config"/> -->
+        </div>
+
+    </div>
 </template>
 
 <script>
 
 import { DocumentEditor } from "@onlyoffice/document-editor-vue";
+// import { onlyofficeEditor } from "@onlyoffice/document-editor-vue"
 import myUpload from '../../../components/upload'
 export default {
     name: 'ExampleComponent',
     components: {
         DocumentEditor,
-        myUpload
+        myUpload,
+        // DocumentEditor
+
     },
     data() {
+        let _this = this;
         return {
+            
+            url: '',
+
+            src: 'http://192.168.2.221:7778/web-apps/apps/api/documents/api.js',
+
             config: {
 
-            },
-            configs: {
+                documentType: 'cell',
                 document: {
-                    fileType: "docx",
-                    key: "Khirz6zTPdfd7",
-                    title: "Example Document Title.docx",
-                    url: "https://example.com/url-to-example-document.docx"
+                    fileType: "xlsx",
+                    key: "e07e63993f3aaa920cbed74d8fc15794",
+                    title: "后评估模板.xlsx",
+                    url: "http://192.168.2.124:7779/api/file/download?id=e07e63993f3aaa920cbed74d8fc15794"
                 },
-                documentType: "word",
+     
                 editorConfig: {
-                    callbackUrl: "https://example.com/url-to-callback.ashx"
+                    user: {
+                        id: "78e1e841",
+                        name: "范岩"
+                    },
+                    callbackUrl: "http://192.168.2.124:7779/api/online/callback?type=callback&fileName=安装mysql-udf-http.docx&userIdfanyan&userName=范岩"
                 }
             },
             fileInfo: {
-                    limit: 10,
-                    url: '/aps/api/file/upload',
-                    fileList: []
-                },
+                limit: 10,
+                url: '/aps/api/file/upload',
+                fileList: []
+            },
         }
     },
-    mounted(){
-     this.getList()
-    }, 
+    mounted() {
+        this.getList()
+        this.getLists()
+    },
     methods: {
         getList() {
             this.$http({
-                url: "/aps/restEdit",
+                url: "/aps/api/restfile/edit",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: {
+                    id: '647f6c6cff4d05f18d1fbcc89769d5fb',
+                    edit: true,
+                    userId: 'fanyan',
+                    userName: '范岩'
+                },
+            }).then((res) => {
+                console.log(res);
+                let url = 'http://192.168.2.124:7779/api/online/callback?type=callback&fileName=%E5%AE%89%E8%A3%85mysql-udf-http.docx&userIdfanyan&userName=%E8%8C%83%E5%B2%A9'
+                let urls = decodeURIComponent(url)
+                // console.log(123);
+                console.log(urls);
+                // this.config.document.url = urls;
+
+            });
+        },
+        getLists() {
+            this.$http({
+                url: "/aps/api/restfile/list",
                 method: "post",
                 headers: {
                     "Content-Type": "application/json",
                 },
                 data: {
-                    edit:true,
-                    userId:'fanyan',
-                    userName:'范岩'
+
                 },
             }).then((res) => {
                 console.log(res);
+
             });
         },
-        onDocumentReady() {
-            console.log("Document is loaded");
+        onReady(editor) {
+            console.log('[ editor ] >', editor)
         },
-        uploadBack(){
+        uploadBack() {
 
         }
     },

vue.config.js

@@ -106,7 +106,7 @@ module.exports = {
                 changeOrigin: true,
                 logLevel:'debug',
                 pathRewrite: {
-                    "^/aps": "/api/file",
+                    "^/aps": "",
                 },
             },
             "/market/mk": {

yarn.lock

@@ -6385,6 +6385,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.npmmirror.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmmirror.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -7088,6 +7093,11 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
+onlyoffice-vue@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/onlyoffice-vue/-/onlyoffice-vue-1.0.1.tgz#5d98e973d12e0e96608bb3784a1b848b874f827f"
+  integrity sha512-90L/oxfhVtUgTRHUCQmrb6Ye5sp/GsEEqAl8AWZeeS+IIe68yZrwAzcVhgOe+RtfRb37c2gp+wrs5HHbWxx1CQ==
+
 open@^6.3.0:
   version "6.4.0"
   resolved "https://registry.npmmirror.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"