onlyoffice vue

OnlyOffice提供了一个名为`@onlyoffice/documenteditor`的Vue组件，您可以在Vue项目中使用它来轻松嵌入OnlyOffice文档编辑器。下面是一个简单的示例：

1. 安装OnlyOffice Vue组件：

npm install @onlyoffice/documenteditor --save

2. 在需要使用OnlyOffice编辑器的Vue组件中引入OnlyOffice组件：

<template>
  <div>
    <onlyoffice-document-editor
      :document="document"
      :options="options"
      @ready="onReady"
      @change="onChange"
    />
  </div>
</template>

<script>
import { OnlyofficeDocumentEditor } from '@onlyoffice/documenteditor';

export default {
  components: {
    OnlyofficeDocumentEditor,
  },
  data() {
    return {
      document: {
        fileType: 'docx',
        key: 'your-key',
        url: 'https://your.onlyoffice.server/your-document.docx',
        permissions: {
          edit: true,
          print: true,
        },
      },
      options: {
        documentType: 'text',
        editorConfig: {
          mode: 'edit',
        },
      },
    };
  },
  methods: {
    onReady() {
      console.log('OnlyOffice editor is ready');
    },
    onChange() {
      console.log('Document content changed');
    },
  },
};
</script>

在上面的示例中，我们使用了`OnlyofficeDocumentEditor`组件，并将其绑定到`document`和`options`属性上。`document`属性指定了要编辑的文档的信息，`options`属性指定了编辑器的选项。

3. 根据需要使用CSS样式调整OnlyOffice编辑器的外观。

请注意，上面的示例仅用于说明如何在Vue项目中使用OnlyOffice组件，您需要将其调整为适合您的具体应用程序的方式。另外，您需要确保OnlyOffice服务器配置正确，并具有正确的访问权限。