ONLYOFFICE文档编辑器的基本使用

本文介绍了ONLYOFFICE文档编辑器,包括其功能如实时协作、支持的文件格式和版本区分(社区版、企业版和开发者版)。文章详细讲解了Docker部署、API使用、安装与验证方法,以及解决常见问题的解决方案。
摘要由CSDN通过智能技术生成

简介

ONLYOFFICE 文档 是一个开源办公套件,包括文本文档、电子表格、演示文稿和可填写表单的编辑器。 
它提供以下功能:
-创建、编辑和查看文本文档、电子表格、演示文稿和可填写表单;
-与其他队友实时协作处理文件。
-ONLYOFFICE 文档还支持用于将您的应用程序与online office集成的 WOPI 协议。 

注意:
-在ONLYOFFICE中并不是所有能打开的格式都能进行在线编辑的,比如 docx、xlsx、pptx、txt是可以打开并编辑的,而doc、xls、ppt、pdf等文件就不能在线编辑只能浏览了。


-ONLYOFFICE对可同时编辑的最多文档数量进行了限定。当达到限定时,之后所有文档都将以只读模式打开。

-ONLYOFFICE运作过程说明如下:

ONLYOFFICE API 文档 - 它是如何运作的

各版本区别

ONLYOFFICE 提供不同版本的在线文档编辑器:社区版、企业版以及开发者版。

社区版

如果您是一个技术爱好者,为非关键的业务流程寻求强大的文档编辑功能,请考虑 ONLYOFFICE 文档社区版。

该版本可免费下载,采用AGPL v.3许可证,源代码可在GitHub上访问。

请注意:社区版最多可支持 20 个同时连接。

企业版

如果您需要企业就绪的编辑和安全功能,安全和稳定性修复优先访问,或需要 ONLYOFFICE 团队的技术支持,请选择 ONLYOFFICE 文档企业版。

该版本易于扩展,可供成千上万的用户使用。了解更多

开发者版

如果您是一位软件开发商,正在寻求强大的文档编辑功能以扩展您的服务功能,并在您的品牌下向客户提供,ONLYOFFICE 文档开发者版会适合您的需求。了解更多

官网

-中文官网:
https://www.onlyoffice.com/zh/

-中文API文档:
https://api.onlyoffice.com/editors/basic

-英文官网:
https://www.onlyoffice.com/

-英文API文档:
https://api.onlyoffice.com/

安装、启动与停止

-【安装与启动命令】:

这里采用Docker进行安装比较方便,执行以下命令进行安装和启动容器:

注意:

        这里最好用较新版本的Docker来安装,因为我之前采用18.x版本时安装会报错:Error response from daemon: missing signature key。

-【带Token验证的安装、启动命令】:
docker run -i -t -d -p 8088:80 --restart=always -e JWT_SECRET=my_jwt_secret onlyoffice/documentserver

注意:

        这里的8088为ONLYOFFICE工具访问的端口号,my_jwt_secret为自定义的JWT SECRET。

-【不带Token验证的安装、启动命令】:
docker run -i -t -d -p 8088:80 --restart=always -e JWT_ENABLED=false onlyoffice/documentserver

-【停止ONLYOFFICCE】:
docker stop 7eacd10fb717

-【启动ONLYOFFICCE】:
docker start 7eacd10fb717

注意:

        7eacd10fb717是安装好的ONLYOFFICE容器ID。安装、启动后,可用docker ps来查看。
下面的命令中出现的容器ID是一个意思。

-【进入ONLYOFFICE容器】:
docker exec -it 7eacd10fb717 /bin/bash

注意:

        7eacd10fb717是安装好的ONLYOFFICE容器ID。

-【进入容器后重启ONLYOFFICE服务】:
supervisorctl restart all

-【查看ONLYOFFICE JWT secret】:
docker exec 7eacd10fb717 /var/www/onlyoffice/documentserver/npm/json -f /etc/onlyoffice/documentserver/local.json 'services.CoAuthoring.secret.session.string'

-【查看容器日志】:
docker logs -tf 7eacd10fb717

注意:

        7eacd10fb717是安装好的ONLYOFFICE容器ID。

关于配置文件的说明

配置文件可以在以下路径中找到:
对于 Linux:/etc/onlyoffice/documentserver/default.json。
对于 Windows:%ProgramFiles%\ONLYOFFICE\DocumentServer\config\default.json。

        所有主要设置都存储在 default.json 文件中,其中一些设置被 production.json 文件中的设置添加或覆盖,任何用户/开发人员设置则被 local.json 配置文件中的设置覆盖。
        

注意:

        如果您更改 default.json 或 production.json 文件中的参数,则所有更改将在 文档服务器更新或 Docker 容器重启后丢失(如果您使用 Docker 安装的 文档服务器),到时都会恢复默认值
        如果要修改默认配置参数,应该使用 local.json 配置文件。
此文件必须与 default.json 文件在同一文件夹中创建,并且 必须保留 必要参数的 整个对象结构。


在线编辑和保存的实践步骤

参考:https://api.onlyoffice.com/zh/editors/save

1.创建一个 回调处理程序 以保存来自 文档编辑服务的文档。

2.创建一个 html 文件来 打开文档。

3.在文档编辑器初始化的配置脚本中,使用 参数行中的 回调处理程序 指定文件的 URL。

示例:
new DocsAPI.DocEditor("placeholder", {
    "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"
    },
});

其中 example.com 是安装了 文档管理器 和 文档存储服务 的服务器的名称;/url-to-callback.ashx是在线文档保存时回调的文件保存接口地址。

4.在浏览器中打开您的 html 文件并编辑您的文档。

5.关闭 文档编辑器。 在大约 10 秒内再次查看您的文档,此时所有更改应该就被保存了。


关于在线编辑文档后,保存文件的延迟说明

文档编辑完成后, 文档编辑服务 会将它通知给 文档存储服务。

完成之前的时间是根据编辑文件到 Office Open XML 格式的转换时间(取决于文件大小、复杂性和计算机能力,并且可以执行相当长的时间)和转换开始延迟来计算时间(默认为 5 秒)。 

在最常见的情况下,编辑完成后的时间约为 10 秒。

转换开始延迟对于允许在不保存文件的情况下返回文件编辑会话是必要的,例如在打开文件进行编辑的情况下重新加载浏览器页面时。 

默认转换开始延迟时间由 services.CoAuthoring.server.savetimeoutdelay 参数在 文档服务器 配置文件中定义,  配置文件可以在以下路径中找到:

对于 Linux - /etc/onlyoffice/documentserver/default.json

对于 Windows - %ProgramFiles%\ONLYOFFICE\DocumentServer\config\default.json

如果要更改它,可以使用 local.json 文件,该文件应存储所有已编辑的参数。 

我测试用的HTML前端完整代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="fileEdit"></div>
<!-- 页面引入ONLYOFFICE Server端的api.js -->
<script type="text/javascript" src="http://192.168.88.211:8088/web-apps/apps/api/documents/api.js"></script>
<script>
  //获取url参数的方法
  function getQueryString(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    };
    return null;
  }

  let filePath = getQueryString("filePath");//通过url参数传入的要打开文件的相对路径
  let fileName = filePath.substring(filePath.lastIndexOf("/")+1);//获取文件名,用于ONLYOFFICE编辑器title标题设置
  let extName = filePath.substring(filePath.lastIndexOf(".")+1);//获取文件扩展名,用于ONLYOFFICE编辑器fileType文件类型设置

  let editorConfig = {
    "lang": "zh-CN",//设置ONLYOFFICE编辑器语言为中文
    //保存文档时最终的回调接口,用于保存在线编辑的文件到存储
    "callbackUrl": window.location.protocol+"//"+window.location.host+"/jeecg-boot/mytest/myTest/officedoc/save?path="+filePath
  }
  let mode = getQueryString("mode");//通过url参数传入的要打开文件的打开方式,我这里传入view表示只读。
  if(mode && mode == "view"){
    editorConfig = {
      "lang": "zh-CN",//设置ONLYOFFICE编辑器语言为中文
      "mode": "view"//设置只读时使用的配置,不加则默认表示允许编辑(只读时不需要填不加callbackUrl配置)
    }
  }
  /*
  ONLYOFFICE编辑器有三种主要外观,针对不同用途进行了优化,可通过type属性予以配置:
    desktop,针对桌面计算机浏览器中的显示进行了优化;
    mobile,针对移动设备浏览器中的显示进行了优化;
    embedded,针对将文档嵌入网页进行了优化。
   */
new DocsAPI.DocEditor("fileEdit", // 显示ONLYOFFICE编辑器的DOM元素id
  {
    type: "desktop",//编辑器外观,
    width: "100%",
    height: "1000px",
    document: {
      title: fileName,//文件标题
      url: window.location.protocol+"//"+window.location.host+"/jeecg-boot/sys/common/static/"+filePath,//要打开的文件地址
      //fileType:"docx",
      fileType:extName,
      key: "",//如果要多人协作编辑一个文件,可对每个文件设置不同的key。
      permissions: {//编辑器权限配置
        "download": true,
        "edit": true,
        "fillForms": true,
        "print": true,
      }
    },
    editorConfig: editorConfig
  });
</script>
</body>
</html>


使用时遇到的问题及解决方案

1.The document security token is not correctly formed.

解决方案参考:https://tieba.baidu.com/p/8110282127

在docker容器中修改local.json文件(vim /etc/onlyoffice/documentserver/local.json),修改下列三个值改为false:

"token": {
        "enable": {
          "request": {
            "inbox": false,
            "outbox": false
          },
          "browser": false
        },

PS:以上修改表示不采用token验证,使用token验证需要在请求ONLYOFFIE API时获取token并传入才行。不过开启token验证后,我在项目页面中通过ONLYOFFICE加载文档时报错,总也加载不了文档。。。o(>o<)o,所以干脆把token验证关了才好了最后。。。有童鞋知道咋回事的可留言告我一声啊,咳咳。


2.Download failed

解决方案参考:https://tieba.baidu.com/p/8110282127

在docker容器中修改local.json文件(vim /etc/onlyoffice/documentserver/local.json),添加以下配置:

request-filtering-agent中的allowPrivateIPAddress、allowMetaIPAddress均为true

"request-filtering-agent": {
        "allowPrivateIPAddress": true,
        "allowMetaIPAAddress": true
},

  • 27
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在Vue中获取OnlyOffice在线编辑器的HTML,你可以使用OnlyOffice的JavaScript API。以下是一个示例代码: ```javascript // 获取OnlyOffice在线编辑器的HTML function getDocumentContent() { const docEditor = window.documentEditor; docEditor.document.getContent((content) => { console.log(content); // 这里可以将content保存到数据库或者发送到后端服务器 }); } // 在Vue组件中使用 export default { mounted() { // 在组件挂载后,初始化OnlyOffice编辑器 this.initEditor(); }, methods: { initEditor() { const editorElement = this.$refs.onlyOfficeEditor; const editorConfig = { type: 'desktop', document: { fileType: 'docx', url: 'http://your-document-url', }, editorConfig: { callbackUrl: 'http://your-callback-url', }, events: { onDocumentStateChange: (event) => { // 处理文档状态变化的事件 }, }, }; window.documentEditor = new DocsAPI.DocEditor(editorElement, editorConfig); }, getContent() { // 调用getDocumentContent()获取文档内容 getDocumentContent(); }, }, }; ``` 在这个示例代码中,我们首先定义了一个名为`getDocumentContent()`的函数,用于获取OnlyOffice在线编辑器的HTML内容。然后,在Vue组件中,我们通过`initEditor()`方法初始化OnlyOffice编辑器,并且将编辑器实例保存到`window.documentEditor`对象中,以便在其他方法中使用。最后,我们在组件中定义了一个名为`getContent()`的方法,用于在用户点击按钮时调用`getDocumentContent()`方法来获取文档内容。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值