onlyoffice整合vue案例

以下是一个基本的 OnlyOffice 整合 Vue 的示例：

1. 首先，在 Vue 项目中安装 OnlyOffice 的 JavaScript SDK：

npm install onlyoffice-document-sdk-js --save

2. 在 `main.js` 中导入 OnlyOffice SDK：

import * as OnlyOffice from 'onlyoffice-document-sdk-js';

3. 在 Vue 组件中创建一个 OnlyOffice 文档编辑器实例：

<template>
  <div ref="editor"></div>
</template>

<script>
export default {
  mounted() {
    const config = {
      document: {
        fileType: 'docx',
        key: 'your_document_key',
        title: 'Your Document Title',
        url: 'https://example.com/documents/document.docx',
      },
      editorConfig: {
        mode: 'edit',
        callbackUrl: 'https://example.com/callback',
        customization: {
          chat: false,
          comments: false,
          compactHeader: false,
          feedback: false,
          forcesave: false,
          help: false,
          goback: {
            url: 'https://example.com/dashboard',
            text: 'Go back to Dashboard',
          },
        },
      },
      events: {
        onReady: () => {
          console.log('OnlyOffice editor is ready');
        },
        onDocumentStateChange: (event) => {
          console.log('Document state changed:', event);
        },
        onError: (error) => {
          console.error('OnlyOffice error:', error);
        },
      },
    };

    const editor = new OnlyOffice.Editor('editor', config);
  },
};
</script>

4. 运行 Vue 项目并查看 OnlyOffice 文档编辑器是否成功整合。