Vue

ONLYOFFICE 文档 Vue.js组件集成 ONLYOFFICE 文档到 Vue.js 项目。

先决条件

使用 ONLYOFFICE 文档编辑器创建演示 Vue.js 应用程序

此过程创建一个基本 Vue.js 应用程序基本 Vue.js 应用程序并在其中安装 ONLYOFFICE 文档编辑器。

打开命令行或命令提示符，并使用创建 Vue 工具，创建一个名为 onlyoffice-vue-demo 的 Vue.js 3.x 项目：
```
npm create vue@3
```
进入新创建的目录：
```
cd onlyoffice-vue-demo
```
从 npm 安装 ONLYOFFICE 文档 Vue.js 组件，并使用 --save 将其保存到 package.json 文件中：
```
npm install --save @onlyoffice/document-editor-vue
```

打开 onlyoffice-vue-demo 项目中的 ./src/App.vue 文件，并将其内容替换为以下代码：

<template>
    <DocumentEditor 
        id="docEditor" 
        documentServerUrl="http://documentserver/"
        :config="config"
        :events_onDocumentReady="onDocumentReady"
        :onLoadComponentError="onLoadComponentError"
    /> 
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { DocumentEditor } from "@onlyoffice/document-editor-vue";

export default defineComponent({
    name: 'ExampleComponent',
    components: {
        DocumentEditor
    },
    data() {
        return {
            config: {
                document: {
                    fileType: "docx",
                    key: "Khirz6zTPdfd7",
                    title: "Example Document Title.docx",
                    url: "https://example.com/url-to-example-document.docx"
                },
                documentType: "word",
                editorConfig: {
                    callbackUrl: "https://example.com/url-to-callback.ashx"
                }
            }
        }
    },
    methods: {
        onDocumentReady() {
            console.log("Document is loaded");
        },
        onLoadComponentError (errorCode, errorDescription) {
            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;
            }
        }
    },
});
</script>

将以下行替换为您自己的数据：

http://documentserver/ - 替换为您的服务器的 URL；
https://example.com/url-to-example-document.docx - 替换为您的文件的 URL；
https://example.com/url-to-callback.ashx - 替换为您的回调 URL（这是保存功能正常工作所必需的）。

使用 Vue 开发服务器测试应用程序：
- 要启动开发服务器，请导航到 onlyoffice-vue-demo 目录并运行：
```
npm run dev
```
- 要停止开发服务器，请选择命令行或命令提示符，然后按 Ctrl+C。

在 Vue.js 应用程序中调用编辑器方法

将DocEditor.instances 参数添加到window 对象中，并通过编辑器 ID 从该对象中获取编辑器对象：
```
const documentEditor = window.DocEditor.instances["docEditor"]
```

从这个对象中调用任何编译器的方法:

documentEditor.showMessage("Welcome to ONLYOFFICE Editor!")

示例:

onDocumentReady() {
  const documentEditor = window.DocEditor.instances["docEditor"]

  documentEditor.showMessage("Welcome to ONLYOFFICE Editor!")
}

部署演示 Vue.js 应用程序

将应用程序部署到生产环境的最简单方法是安装 serve 并创建静态服务器：

全局安装 serve 包：
```
npm install -g serve
```
在 3000 端口上为您的静态站点提供服务：
```
serve -s build
```
可以使用 -l 或 --listen 标志调整另一个端口：
```
serve -s build -l 4000
```
要提供项目文件夹，请转到该文件夹并运行 serve 命令：
```
cd onlyoffice-vue-demo
serve
```

现在您可以将应用程序部署到创建的服务器：

导航到 onlyoffice-vue-demo 目录并运行：
```
npm run build
```
dist 目录将使用您的应用程序的产品版本创建。
将 onlyoffice-vue-demo/dist 目录的内容复制到 Web 服务器的根目录（复制到 onlyoffice-vue-demo 文件夹）。

该应用程序将部署在 Web 服务器上（默认情况下 http://localhost:3000）。

ONLYOFFICE 文档 Vue 组件 API

属性

名称	类型	默认	描述
id*	string	null	组件唯一标识符。
documentServerUrl*	string	null	ONLYOFFICE 文档服务器的地址。
config*	object	null	用于使用令牌打开文件的通用配置对象。
document_fileType	string	null	文件的类型。
document_title	string	null	文件名。
documentType	string	null	文档类型。
height	string	null	定义浏览器窗口中的文档高度。
type	string	null	定义用于访问文档的平台类型（桌面、移动或嵌入式）。
width	string	null	定义浏览器窗口中的文档宽度。
events_onAppReady	(event: object) => void	null	当应用程序加载到浏览器时调用的函数。当应用程序加载到浏览器中时调用的函数。
events_onDocumentStateChange	(event: object) => void	null	修改文档时调用的函数。
events_onMetaChange	(event: object) => void	null	通过 meta 命令更改文档的元信息时调用的函数。
events_onDocumentReady	(event: object) => void	null	将文档加载到文档编辑器时调用的函数。
events_onInfo	(event: object) => void	null	应用程序打开文件时调用的函数。
events_onWarning	(event: object) => void	null	发生警告时调用的函数。
events_onError	(event: object) => void	null	发生错误或其他特定事件时调用的函数。
events_onRequestSharingSettings	(event: object) => void	null	当用户尝试通过单击更改访问权限按钮来管理文档访问权限时调用的函数。
events_onRequestRename	(event: object) => void	null	当用户尝试通过单击重命名... 按钮重命名文件时调用的函数。
events_onMakeActionLink	(event: object) => void	null	当用户试图获取打开包含书签的文档的链接时调用的函数，滚动到书签位置。
events_onRequestInsertImage	(event: object) => void	null	当用户尝试通过单击来自存储的图像按钮插入图像时调用的函数。
events_onRequestSaveAs	(event: object) => void	null	当用户尝试通过单击另存为...按钮来保存文件时调用的函数。
events_onRequestMailMergeRecipients	(event: object) => void	null	当用户尝试通过单击邮件合并按钮来选择收件人数据时调用的函数。
events_onRequestCompareFile	(event: object) => void	null	当用户尝试通过单击存储中的文档按钮来选择要比较的文档时调用的函数。
events_onRequestEditRights	(event: object) => void	null	当用户尝试通过单击编辑文档按钮将文档从查看模式切换到编辑模式时调用的函数。
events_onRequestHistory	(event: object) => void	null	当用户尝试通过单击版本历史记录按钮来显示文档版本历史记录时调用的函数。.
events_onRequestHistoryClose	(event: object) => void	null	当用户试图通过单击关闭历史记录按钮从查看文档版本历史记录返回到文档时调用的函数。
events_onRequestHistoryData	(event: object) => void	null	当用户试图单击文档版本历史记录中的特定文档版本时调用的函数。
events_onRequestRestore	(event: object) => void	null	当用户尝试通过单击版本历史记录中的恢复按钮来恢复文件版本时调用的函数。

* - 必填字段

安装 Storybook

安装 Storybook 以独立开发 UI 组件：

更改 config/default.json 文件中文档服务器的地址：
```
{
  "documentServerUrl": "http://documentserver/"
}
```
其中 documentserver 是安装了 ONLYOFFICE 文档 的服务器的名称。
使用以下命令生成 Storybook：
```
npm run build-storybook
```
启动 Storybook:
```
npm run storybook
```

开发 ONLYOFFICE 文档 Vue 组件

从 GitHub 存储库克隆项目：

git clone https://github.com/ONLYOFFICE/document-editor-vue

安装项目依赖：
```
npm install
```
测试组件：
```
npm run test
```
构建项目：
```
npm run build
```
创建包：
```
npm pack
```

反馈和支持

如果您对 ONLYOFFICE 文档 Vue有任何问题、疑问或建议，请参阅问题部分。

先决条件​

使用 ONLYOFFICE 文档编辑器创建演示 Vue.js 应用程序​

在 Vue.js 应用程序中调用编辑器方法​

部署演示 Vue.js 应用程序​

ONLYOFFICE 文档 Vue 组件 API​

属性​

安装 Storybook​

开发 ONLYOFFICE 文档 Vue 组件​

反馈和支持​