如何在 Vue 应用中嵌入 ONLYOFFICE 编辑器

以下是仅包含 纯前端集成 ONLYOFFICE 文档编辑器到 Vue.js 项目 的完整代码与说明，无需重新创建项目，可直接集成到现有 Vue 项目中：

Vue.js 集成 ONLYOFFICE 文档编辑器（纯前端实现）

后端需要部署到服务器，才能正常调用API否则可能会报错DocsAPI is not defined

1. 安装依赖

在现有 Vue 项目中安装 ONLYOFFICE 官方 Vue 组件：

bash 复制代码

npm install --save @onlyoffice/document-editor-vue

2. 创建编辑器组件

代码：

复制代码

<template>
	<div>
		<DocumentEditor 
			id="docEditor" 
			documentServerUrl="https://onlyoffice.demo.chinamcloud.cn"
			:config="config"
			:events_onDocumentReady="onDocumentReady"
			:onLoadComponentError="onLoadComponentError"
		/> 
	</div>
</template>

<script>
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() {
           // 回调函数
        },
        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>

3. 在父组件中使用

在任意 Vue 组件中引入并使用即可。

4. 关键配置说明

1. 文档服务器地址

确保 documentServerUrl 指向你的 ONLYOFFICE 文档服务器。
如果是生产环境，需配置 HTTPS。

2. 文档配置

key: 文档的唯一标识符（建议包含时间戳或随机字符串）。
url: 可选，初始文档的 URL（需公开可访问）。
permissions: 控制编辑、下载等权限。

3. 回调处理

前端通常不直接处理保存回调，而是将文档内容转发到后端。
后端需实现保存逻辑（如存储到数据库或文件系统）。

4. 安全性

生产环境建议启用 JWT 验证（需文档服务器支持）。
用户信息（如 user.id）应与后端用户系统关联。

5. 常见问题

文档加载失败 ：
- 检查 documentServerUrl 是否正确。
- 确保文档 URL 可公开访问（如使用 CDN 或配置后端代理）。
跨域问题 ：
- 如果文档服务器和前端不在同一域名下，需配置 CORS 或使用代理。
保存回调未触发 ：
- 确保 editorConfig.editorConfig.callbackUrl 指向正确的后端地址（前端通常留空）。

6. 扩展功能

动态加载文档 ：
- 通过修改 documentConfig 并调用组件方法重新加载。
多文档支持 ：
- 使用动态组件或标签页实现多文档切换。
自定义工具栏 ：
- 通过 editorConfig.editorConfig.customization 配置。

通过以上代码，你可以直接将 ONLYOFFICE 文档编辑器集成到现有 Vue 项目中，无需重新创建项目。根据实际需求调整配置即可！

具体可前往官网学习Vue | ONLYOFFICE