前言
本教程面向需要有二次开发的同学,主要是面向前端UI开发(本人使用MAC环境搭建),windows应该类似
搭建环境要求
- nodejs 自己使用 10.15.3
- docker
安装步骤
-
组织目录结构
demo
— nodejs
— sdkjs
— web-apps
— proxy.js
-
下载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服务已经可以跑起来了。
- 下载SDKJS 并编译 SDKJS https://github.com/ONLYOFFICE/sdkjs
- 装依赖, 在 sdkjs/build 下执行 npm install 安装依赖
- 执行 grunt develop, 在 sdkjs 目录下会生成 develop 的目录
- 下载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',
这里注释是因为会报错,具体原因尚没了解清楚
- 下载nodejs-example 并修改配置 https://api.onlyoffice.com/editors/demopreview
进入 nodejs-example/config/default.json
修改 siteUrl: 为 127.0.0.1:9000
- 使用一个 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);
-
进入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';
大功告成,我们可以任意的去开发了并了解源代码了
资源地址
官网:https://www.onlyoffice.com/
开发文档:https://api.onlyoffice.com/
github地址: https://github.com/ONLYOFFICE/DocumentServer
常见问题
- 上传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
注意:本文归作者所有,未经作者允许,不得转载