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

以下是仅包含 纯前端集成 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 componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}}},
});
</script>

3. 在父组件中使用

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

4. 关键配置说明

1. 文档服务器地址

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

2. 文档配置

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

3. 回调处理

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

4. 安全性

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

---

5. 常见问题

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

---

6. 扩展功能

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

---

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

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