onlyoffice 本地二次开发基础教程

wylc123 1年前 ⋅ 5659 阅读

前言

本教程面向需要有二次开发的同学,主要是面向前端UI开发(本人使用MAC环境搭建),windows应该类似

搭建环境要求

  • nodejs 自己使用 10.15.3
  • docker

安装步骤

  1. 组织目录结构

    demo

    — nodejs

    — sdkjs

    — web-apps

    — proxy.js

  2. 下载DocumentServer Docker环境 安装教程 && 启动方式 http://helpcenter.onlyoffice.com/installation/docs-developer-install-docker.aspx

不清楚的同学可以执行下面的命令,使用最新的6.1.1版本

sudo docker run -i -t -d -p 80:80 --restart=always onlyoffice/documentserver:6.1.1

安装完后查看镜像是否启动,访问

http://127.0.0.1/weclcome/ 访问正常的同学可以打开这样的界面

然后按文档在终端里分别执行上面的两个脚本

执行完后点击here,会进入到 创建文档的界面

这时候docker的onlyoffice服务已经可以跑起来了。

  1. 下载SDKJS 并编译 SDKJS https://github.com/ONLYOFFICE/sdkjs
  • 装依赖, 在 sdkjs/build 下执行 npm install 安装依赖
  • 执行 grunt develop, 在 sdkjs 目录下会生成 develop 的目录
  1. 下载web-apps 并编译 web-apss https://github.com/ONLYOFFICE/web-apps
  • 进入 web-apps/build/sprites 安装依赖 npm install 后执行 grunt 目的是为了生成雪碧图
  • 进入 web-apps/build 安装依赖 npm install 后, 修改 gruntFile.js ,将下面三个地方注释
.....
// grunt.loadNpmTasks('grunt-contrib-imagemin');  
....

// imagemin: {
            //     options: {
            //         optimizationLevel: 3
            //     },
            //     dynamic: {
            //         files: []
            //             .concat(packageFile['main']['imagemin']['images-app'])
            //             .concat(packageFile['main']['imagemin']['images-common'])
            //     }
            // },
...
grunt.registerTask('deploy-app-main',               ['prebuild-icons-sprite', 'main-app-init', 'clean:prebuild', 
    // 'imagemin', 
    'less',

这里注释是因为会报错,具体原因尚没了解清楚

  1. 下载nodejs-example 并修改配置 https://api.onlyoffice.com/editors/demopreview

进入 nodejs-example/config/default.json

修改 siteUrl: 为 127.0.0.1:9000

  1. 使用一个 proxy.js 代理文件,方便本地联调与文件代理,该内部的proxyUrl版本需要和 docker 下启动的静态本地址一致。
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const internalIp = require('internal-ip'); // 在需要的地方require

const app = express();
(async () => {
  const ip = await internalIp.v4();
  // const proxyUrl = `http://${ip}/6.1.0-83/`
  // 根据docker 服务端版本更新
  const proxyUrl = `http://${ip}/6.1.1-53/`
  app.use('/doc', createProxyMiddleware({ target: proxyUrl, changeOrigin: true }));
  // 字体文件 + 字体图片代理
  app.use('/fonts', createProxyMiddleware({ target: `http://127.0.0.1`, changeOrigin: true }));
  app.use('/sdkjs/common/AllFonts.js', createProxyMiddleware({ target: `http://127.0.0.1/`, changeOrigin: true }));
  app.use('/sdkjs/common/Images/fonts_thumbnail@2x.png', createProxyMiddleware({ target: `http://127.0.0.1/`, changeOrigin: true }));

  // 部分文件提前代理
  app.use(express.static('demo'));
})()
app.listen(9000);
  1. 进入docker 修改 nginx 配置,因为会涉及到服务接口跨域问题

    在docker里找到 在 /etc/nginx/includes/ds-docservice.conf, 将一个 fonts 一个 cache/files 增加跨域头,并重启nginx -s reload


add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

大功告成,我们可以任意的去开发了并了解源代码了

资源地址

常见问题

  • 上传word不知道为什么显示 download failed

解决: 浏览器访问不能以localhost,127.0.0.1来直接访问,需要输入你完整的地址(例如:192.168.0.xx:8090/…),不然无法打开在线编辑功能

  • 代理工具需要使用localhost 不然会有https安全问题
  • edit version 版本不对因为构建的 app.js 版本,将版本号同步即可app.js 和 api.js version不一致 再deploy下将版本统一即可

原文转载自:https://www.qiuxinglaile.com/2021/05/onlyoffice.html

有需要可以加群交流:点击链接加入群聊【onlyoffice交流群】:https://jq.qq.com/?_wv=1027&k=ozgBiZts

1群将满可加2群【onlyoffice交流群2】:https://jq.qq.com/?_wv=1027&k=2uSJJPfr

更多内容请访问:IT源点

相关文章推荐

全部评论: 0

    我有话说: