qidao123.com技术社区-IT企服评测·应用市场

标题: OnlyOffice社区版摆设及前端嵌入使用实现office的docx、xlsx等在线协同编辑 [打印本页]
作者: 用多少眼泪才能让你相信    时间: 2024-11-5 09:35
标题: OnlyOffice社区版摆设及前端嵌入使用实现office的docx、xlsx等在线协同编辑
一、OnlyOffice先容

ONLYOFFICE 是一款功能丰富的在线办公软件。它由 Ascensio System SIA 公司开发，有社区版、企业版和开发版等版本。本教程先容开源社区版的安装使用，实现查看、编辑并协作处置惩罚文档、工作表、幻灯片，多人实时协同编辑，支持多人同时编辑一个文档，成员间可互相看到即时编辑内容。

二、安装

1. 选择安装方式安装
官网下载页提供多种平台的下载安装方法，我这边使用的是docker安装，启动docker、设置好国内镜像，实行以下命令
  1. sudo docker run -i -t -d -p 8088:80 --restart=always -e JWT_ENABLED=false  onlyoffice/documentserver
复制代码
这里需要注意的一点是我这里JWT_ENABLED=false，直接把token验证关掉了，后面前端页面嵌入的时候会要求提供key，就是这个，但我这里直接关了，因为我就算设置了key，也鉴权失败，网上好多同样问题的，所以干脆关了，具体缘故起因没有深究。

启动后访问docker映射的端口，这里注意一下，不要用localhost或者127.0.0.1进行访问，用本身装备在局域网中的ip进行访问，具体缘故起因就是可能会打不开文档，比方我这里是：
   http://192.168.11.87:8088/
  进入后页面如下：

2. 查看示例
启动完而且能访问到之后，可以进行测试，看是否能精确的打开、编辑文档，官方docker镜像内提供了一个示例页面，页面下面有一个Testing before integration，下面第一条指令是启动示例的，第二条是自动启动示例的，我们看需求，后面用不消这个示例页决定执不实行自动启动。
启动后可以点击GO TO TEST EXAMPLE按钮进入示例页面

示例页面如下，可以创建新文件，也可以上传文件。

点击文件名即可打开文件进入编辑器页面，如下图所示：

三、嵌入项目使用

小伙伴们万万别搞错了，上面的只是示例，官方在演示页面也说了，这个用作演示，Do not use this…，实际使用启动好OnlyOffice服务即可。

在html中使用
本文的话举个例子，其实用起来很简朴，直接看代码吧
  1. <!doctype html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <div id="fileEdit"></div>
  10.     <style>
  11.         body {
  12.             margin: 0;
  13.             padding: 0;
  14.             height: 100vh;
  15.         }
  17.         #fileEdit {
  18.             width: 100%;
  19.             height: 100vh;
  20.         }
  21.     </style>
  22.     <!-- 页面引入ONLYOFFICE Server端的api.js -->
  23.     <script type="text/javascript" src="http://192.168.11.87:8088/web-apps/apps/api/documents/api.js"></script>
  24.     <script>
  26.         let editorConfig = {
  27.             "lang": "zh-CN",//设置ONLYOFFICE编辑器语言为中文
  28.             //保存文档时最终的回调接口，用于保存在线编辑的文件到存储
  29.             "callbackUrl": "http://192.168.2.62:24005/prod-api/file/upload",
  30.             "lang": "zh-CN",//设置ONLYOFFICE编辑器语言为中文
  31.             "mode": "edit",//设置只读时使用的配置，不加则默认表示允许编辑（只读时不需要填不加callbackUrl配置）
  32.             "customization": {
  33.                 "anonymous": { // set name for anonymous user
  34.                     "request": false, // enable set name
  35.                     "label": "aaa" // postfix for user name
  36.                 },
  37.             },
  38.             user: {
  39.                 id: '1232',
  40.                 name: '夏XX',
  41.                 group: 'group name' // for customization.reviewPermissions or permissions.reviewGroups or permissions.commentGroups. Can be multiple groups separated by commas (,) : 'Group1' or 'Group1,Group2'
  42.             },
  44.         }
  46.         /*
  47.         ONLYOFFICE编辑器有三种主要外观，针对不同用途进行了优化,可通过type属性予以配置：
  48.           desktop，针对桌面计算机浏览器中的显示进行了优化；
  49.           mobile，针对移动设备浏览器中的显示进行了优化；
  50.           embedded，针对将文档嵌入网页进行了优化。
  51.          */
  52.         new DocsAPI.DocEditor("fileEdit", // 显示ONLYOFFICE编辑器的DOM元素id
  53.             {
  54.                 type: "desktop",//编辑器外观，
  55.                 width: "100%",
  56.                 height: "100%",
  57.                 document: {
  58.                     title: 'a.docx',//文件标题
  59.                     url: 'http://192.168.11.152:9300/statics/2024/07/24/%E6%93%8D%E4%BD%9C%E7%A5%A8%E6%A0%A1%E6%A0%B8%E6%A0%A1%E6%A0%B8API%E5%AF%B9%E6%8E%A5%E6%96%87%E6%A1%A3_20240724075639A004.docx',
  60.                     fileType: "docx",
  61.                     //   fileType:extName,
  62.                     key: "a111",//如果要多人协作编辑一个文件，可对每个文件设置不同的key。
  63.                     permissions: {//编辑器权限配置
  64.                         "download": true,
  65.                         "edit": true,
  66.                         "fillForms": true,
  67.                         "print": true,
  68.                     }
  69.                 },
  71.                 editorConfig: editorConfig
  72.             });
  73.     </script>
  74. </body>
  76. </html>
复制代码
页面结果如下：

*以上设置都可以在引用的api.js中查看，官方给的设置项目很多，如下图

可能遇到的问题：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/) Powered by Discuz! X3.4