vue2 集成 Onlyoffice_vue onlyoffice

在Vue 2项目中集成OnlyOffice，你可以使用onlyoffice-vue组件。首先，你需要安装OnlyOffice的Vue组件：

npm install onlyoffice-vue

然后，你可以在你的Vue组件中引入并使用onlyoffice-vue组件。以下是一个简单的例子：

<template>
  <div>
    <onlyoffice
      :document="document"
      :editorConfig="editorConfig"
      @documentChange="onDocumentChange"
    ></onlyoffice>
  </div>
</template>
 
<script>
import OnlyOfficeVue from 'onlyoffice-vue';
 
export default {
  components: {
    'onlyoffice': OnlyOfficeVue
  },
  data() {
    return {
      document: {
        fileType: 'docx',
        key: 'your-document-key', // 文档唯一标识，通常是文件名
        title: 'Your Document Title', // 文档标题
        url: 'http://your-document-server/document.docx' // 文档的URL
      },
      editorConfig: {
        editorConfig: {
          callbackUrl: 'http://your-document-server/callback', // 文档保存后的回调URL
          lang: 'en', // 编辑器语言
          mode: 1 // 编辑器模式：0 = 视图，1 = 编辑，2 = 审核
        }
      }
    };
  },
  methods: {
    onDocumentChange(data) {
      // 文档更改时触发
      console.log(data);
    }
  }
};
</script>

在这个例子中，document对象定义了要编辑的文档的信息，editorConfig对象定义了OnlyOffice编辑器的配置。onlyoffice组件的属性document和editorConfig分别设置为这些数据，并提供了一个documentChange事件的处理函数onDocumentChange，用于当文档被修改时响应更新。

请确保你的服务器配置正确，并且支持OnlyOffice文档编辑器所需的所有API调用。此外，你可能需要设置正确的跨域资源共享(CORS)策略，以允许OnlyOffice组件正确加载和保存文档。