欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

入门OnlyOffice

最编程 2024-08-15 11:25:29
...

OnlyOffice 介绍

onlyoffice 是一个开源办公套件，能够在线编辑 docx,pptx,xlsx

提供了和 office 风格一致的界面，能够直接对 docx 等文档进行修改，而不需要改变文档的格式

官方文档

www.onlyoffice.com/zh/

分为 3 个版本：社区版，开发者版，企业版。其中社区版免费，开发者版、企业版收费。详细特性差异见 GitHub：

github.com/ONLYOFFICE/…

官方示例

api.onlyoffice.com/zh/editors/…

概念介绍

api.onlyoffice.com/zh/editors/…

文档编辑器

onlyoffice 文档编辑器的前端部分

文档编辑服务

onlyoffice 的服务端，由 nodejs 编写

文档存储服务

服务器服务，它存储具有适当访问权限的用户可用的所有文档 可以自己实现，编写 callbackUrl 来供文档编辑服务调用 onlyoffice 约定了文档存储服务的响应体格式

api.onlyoffice.com/zh/editors/…

架构

api.onlyoffice.com/zh/editors/…

分为前端和服务端，服务端有文档编辑服务和文档存储服务。文档编辑服务可以通过 docker 容器提供，文档存储服务可以用容器中自带的，也可以自己编写回调接口实现。

使用

环境搭建

拉取 onlyoffice/documentserver，可以从 DockerHub 拉取，也可以从阿里云镜像站拉取。

docker pull onlyoffice/documentserver

部署服务端

docker run -i -t -d -p <自定义端口>:<自定义端口> --restart=always -e JWT_SECRET=<my_jwt_secret> onlyoffice/documentserver

helpcenter.onlyoffice.com/installatio…

服务端在 Docker 容器中运行，会依次开启 PostgreSQL，RabbitMQ，NodeJS

等 1~2 分钟，见到以下 Docker 日志时，表示 onlyoffice 服务端已启动成功

20231015_195936_image.png

在 vue 项目中集成

vue2 项目安装 onlyoffice-vue vue3 项目安装 @onlyoffice/document-editor-vue

npm i -S @onlyoffice/document-editor-vue

api.onlyoffice.com/zh/editors/…

在 vue 项目中引入组件，传入 config 配置项，见： api.onlyoffice.com/zh/editors/…

常用配置参数：

名称 说明
src api.js 的路径，注意：只能从容器中请求，不能直接把 api.js 放到本地
width 编辑器宽度，如果不想写死 px 或者 vw，可以设置成 100%，在组件外部定义宽度
height 编辑器高度，如果不想写死 px 或者 vw，可以设置成 100%，在组件外部定义高度
document 见下表
editorConfig 见下表

document 配置

名称 说明
url 文档的路径，可以从业务的后服务端获取，也可以从 documentServer 的服务端获取（取决于文档存放的位置）
permissions 权限设置，e.g. 设置只读

editorConfig 配置

名称 说明
callbackUrl 回调接口的 URL，可以是业务服务端的接口
plugins 可以设置自定义插件，见下文

示例代码

参考 github.com/ONLYOFFICE/…

<DocumentEditor id="docEditor" documentServerUrl="src" :config="config" />

import { defineComponent } from 'vue';
import { DocumentEditor } from "@onlyoffice/document-editor-vue";

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    DocumentEditor
  },
  data() {
    return {
      src: "http://<onlyoffice服务端地址>/web-apps/apps/api/documents/api.js",
      config: {
        width: "100%",
        height: "100%",
        document: {
          fileType: "docx",
          key: "test.docx" + new Date().getTime(),
          title: "测试.docx",
          url: "https://<服务端域名>/<文件路径>/<文件名>.docx",
          permissions: {
            comment: false,
            download: true,
            // 设置能否编辑
            edit: true,
            print: true,
            review: true,
          },
        },
        editorConfig: {
          lang: "zh-CN",
          documentType: "<>",

          token:
            <自定义 JWT token>,
          type: "desktop",
          callbackUrl: <服务端保存文件接口>,
          plugins: {
            autostart: [<自定义插件的guid>],
            pluginsData: [
              "<自定义插件路径>/config.json",
            ],
          },
        },
      }
    };
  }
});

callbackUrl

保存文件的接口，供文档编辑服务调用 当打开编辑器，点击修改按钮，关闭编辑器时，文档编辑服务会回调文档存储服务 不同的状态用不同的数字表示：

数字 说明
1 连接文档
2/3 修改后断开文档连接
4 没有修改时断开文档连接
6/7 强制保存

官网的示例是在状态 2 下保存文件到文档存储服务

请求体样例

20231015_204016_image.png

参考：

api.onlyoffice.com/zh/editors/…

注意：打开文件时，word 文档可以是 doc，也可以是 docx；但是保存文档时，不能保存成 doc

来源：

api.onlyoffice.com/editors/con…

自定义插件

如果想在文档编辑器中加入自定义功能，可以使用自定义插件实现。

api.onlyoffice.com/zh/editors/…

插件是一个独立的应用，通过 iframe 嵌入到编辑器中

插件应用不限技术栈，不限打包方式。可以使用@vue/cli,vite 等打包，也可以全部 js 在线引入

插件应用必须包含以下文件

文件 作用
config.json 插件的配置文件，供编辑器读取后加载插件
index.html 插件的页面入口，本质上是一个单页应用的入口

config.json

需要定义一个 guid

variations.icons 设置插件图标的路径

index.html 要引入的文件

<script src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>

可以放在本地单独引用

如何开发自定义插件

开发插件时，可以参考官方的插件代码

github.com/ONLYOFFICE/…

示例代码

config.json

{
  "name": "Hello",
  "guid": "asc.{11700c35-1fdb-4e37-9edb-b31637139601}",
  "variations": [
    {
      "description": "Hello Word",
      "url": "index.html",
      "icons": ["icon.png", "icon@2x.png"],
      "isViewer": false,
      "EditorsSupport": ["word"],
      "isVisual": true,
      "isModal": false,
      "isInsideMode": true,
      "initDataType": "none",
      "initData": "",
      "isUpdateOleOnResize": false,
      "buttons": [],
      "events": ["onClick"]
    }
  ]
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
    <script src="main.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        padding: 12px;
      }
    </style>
  </head>

  <body>
    <button id="addText" class="btn-text-default submit primary">添加</button>
  </body>
</html>

main.js

/* eslint-disable */
(function (window, undefined) {
  window.Asc.plugin.init = function (initData) {
    console.log("插件开始初始化");

    var me = this;
    $("#addText").click(function () {
      window.Asc.plugin.executeMethod("PasteText", [
        `ONLYOFFICE for developers.`,
      ]);
    });

    window.Asc.plugin.button = function (id) {
      // 被中断或关闭窗口
      if (id === -1) {
        this.executeCommand("close", "");
      }
    };
  };
})(window, undefined);

插件工作原理

每个插件对应一个 iframe

设主应用为 A 域，在线编辑器为 B 域，插件为 C 域

A 域中，通过 iframe 嵌入 B 域，B 域中通过 iframe 嵌入 C 域

20231015_195257_image.png

建议插件中调的接口和主应用的域名相同，以便直接获取 cookie,localstorage,sessionstorage 等，发送异步请求时能够带上 cookie 和 auth token。

插件和文档编辑器之间如何通信

api.onlyoffice.com/plugin/plug…

调用插件的 API

e.g.

window.Asc.plugin.executeMethod("PasteText", [xxx]);

遇到的问题

页面弹窗报错：下载失败

20231015_211441_image.png

原因：文件 url 不对，导致无法加载到文件

页面弹窗报错：这份文件无法保存

20231015_211243_image.png

原因：callbackUrl 回调接口调用失败

key 包含中文时，文档加载不出来，浏览器不断地去请求/c/info

20231015_144955_image.png

20231015_145025_image.png

解决：key 不能含有中文

插件中调用业务接口，没有带上 token

解决：

插件中调接口，域名和主应用一致，以便直接利用主应用的 cookie 和 storage

通过代码来修改文档

方案 1

调用 onlyoffice 的函数 connector 的 callCommand

api.onlyoffice.com/zh/editors/…

优点：简单

缺点：社区版没有提供此 api，开发者版，企业版才有，需要收费

方案 2

自定义插件，调用插件的 execMethod 或者 callCommand 函数

优点：社区版即可

缺点：需要编写一个前端应用作为插件

源码分析

代码库总入口

github.com/ONLYOFFICE/…

文档编辑器源码

github.com/ONLYOFFICE/…

文档编辑服务源码

github.com/ONLYOFFICE/…

自带插件源码

github.com/ONLYOFFICE/…

插件示例源码

github.com/ONLYOFFICE/…

Docker 打包源码

github.com/ONLYOFFICE/…

关键流程顺序图

打开文档

// TODO

手动保存文档

// TODO

关闭文档

// TODO

----------------未完待续----------------------------

上一篇： 在线网站神A

下一篇： CSS :active选择器用于设置被点击的链接的样式

推荐阅读