draw.io 二次开发（idea2020） 系列（二）

上次的文章（系列一）主要是下载源码和搭建本地开发环境

现在我已经可以在浏览器打开 http://localhost:8080/drawio了  

首先要改掉 打开流程编辑器前的 欢迎提示界面

webapp目录下 index.html 搜索  geBlock

把英文提示改成自己的提示

根据文档，在url后面用不同的参数可以达到不同效果

http://localhost:8080/drawio/?lang=zh  用这个可以打开默认简体中文界面

http://localhost:8080/drawio/?offline=1   用这个可以跳过选择存储方式，不用选什么google drive，github之类的

http://localhost:8080/drawio/?dev=1     用这个可以进入调试模式，也就是前端加载的不是压缩后的js，方便调试前端代码  (实际我打不开这个页面，一直卡在加载界面，发现是有些静态资源请求的地址 是  http://devhost.jgraph.com/xxxxxxxx)   需要代码里全文搜索 devhost.jgraph.com  找到 index.html 文件  把这个写死的域名去掉 ，具体示例参考

https://www.jianshu.com/p/40a30dd1a3f1  (这个文章还有参数列表说明，可以看看)

其他修改： (见最后的说明，由于我只是用了draw.io的embed功能，所以对于编辑器首页的界面，我并不需要做这些修改，下面这些只是收集一些网上的修改经验)

1. 删除右上角share按钮

参考 drawio.io二次开发采坑记录_maoguan121的博客-CSDN博客_drawio 源码

修改  js/diagramly/Menus.js 里面的代码

2. File菜单功能修改

里面有些按钮菜单 没必要  或者 依赖draw.io官方接口  

 参考 drawio.io二次开发采坑记录_maoguan121的博客-CSDN博客_drawio 源码

3. 进入界面后底部弹框提示下载桌面版，可以隐藏掉或者换成自己的链接

 参考 drawio.io二次开发采坑记录_maoguan121的博客-CSDN博客_drawio 源码

4. 精简右上角语言列表，入门视频链接，默认搜索引擎等 修改

 参考 drawio.io二次开发采坑记录_maoguan121的博客-CSDN博客_drawio 源码

5.修改一些静态资源的请求地址，修改发布预览地址等

参考 draw.io二次开发改造过程_iru的博客-CSDN博客_drawio源码分析

最后我要做的流程编辑器  是需要以下功能   

创建和编辑新的流程图

加载和编辑已有流程图

支持导出svg文件 和 png图片文件

由于需求不是很复杂，并且为了避免更改很多代码 (方便以后用最新的源码覆盖更新)， 

目前采用的方式是

1. 后端用  tomcat  把这个draw.io 代码跑起来，作为一个中间件 

2. 前端 要用到 draw.io 提供的  https://github.com/jgraph/drawio-integration 前端页面，这个页面 会用iframe的形式 加载 draw.io 服务, 只需要在这个页面上把它的域名修改为 指向自己在跑的后端draw.io 服务

这个 drawio-intergration

在文件 helloworld.html 里面 会用  diagram-editor.js 去加载 本地iframe

修改 diagram-editor.js

把
DiagramEditor.prototype.drawDomain = 'https://embed.diagrams.net/';
改成 
DiagramEditor.prototype.drawDomain = 'http://我的本地ip或远程ip:8080/drawio/?embed=1&lang=zh';
 
 
 
由于url拼接方式 
由 二级域名 ? 自定义参数  变成了   
ip ? 默认参数 &自定义参数 , 所以修改一下 
 
把
DiagramEditor.prototype.getFrameUrl = function()
{
	var url = this.drawDomain + '?proto=json&spin=1';
......
 
改成
DiagramEditor.prototype.getFrameUrl = function()
{
	var url = this.drawDomain + '&proto=json&spin=1';
......
 

 这个 helloworld.html 和 diagram-editor.js 会让iframe 里面的drawio 编辑器 加载一个svg文件

其他的功能  利用他的iframe通信去完成

​​​​​​