如何在 Vue 应用中嵌入 ONLYOFFICE 编辑器-EW帮帮网

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

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

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

1. 安装依赖

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

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

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