記錄一下 二次開發(fā)drawio的過(guò)程

首先要說(shuō)一下 drawio 這個(gè)東西是真的很強(qiáng)大，由于公司業(yè)務(wù)的發(fā)展，需要用到或者界面編輯工具，話不多說(shuō)直接剛。

首先先去將項(xiàng)目搭建起來(lái)，我搭建過(guò)程是在Ubuntu下搭建的，搭建過(guò)程很簡(jiǎn)單，打包編譯成war包后運(yùn)行在tomcat下面就可以了。這里就不詳細(xì)講搭建過(guò)程了，具體自己搜索一下? 網(wǎng)上搭建教程很多，操作很簡(jiǎn)單。下面我主要講一下 怎么進(jìn)入到開發(fā)者模式去開發(fā)調(diào)試。

在index.html 文件中? ?urlParams['dev'] == '1'? 這里改成一下的代碼，這里我也是看到網(wǎng)上的大佬改的? 具體如下

if (urlParams['dev'] == '1'){var mxDevUrl = document.location.origin+document.location.pathname; if (document.location.protocol == 'file:'){mxDevUrl = '../../mxgraph2';// Forces includes for dev environment in node.jsmxForceIncludes = true;}var geBasePath = mxDevUrl + 'js/mxgraph/';//mx盲猜就是 mxgraphvar mxBasePath = mxDevUrl + 'js/mxgraph/';// Used to request draw.io sources in dev modevar drawDevUrl = mxDevUrl;mxscript(drawDevUrl + 'js/diagramly/Init.js');mxscript(geBasePath + 'Init.js');mxscript(geBasePath + 'jquery-3.4.1.js');mxscript(mxDevUrl + 'js/mxgraph/mxClient.js');// Adds all JS code that depends on mxClient. This indirection via Devel.js is// required in some browsers to make sure mxClient.js (and the files that it// loads asynchronously) are available when the code loaded in Devel.js runs.mxscript(drawDevUrl + 'js/diagramly/Devel.js');mxscript(drawDevUrl + 'js/PostConfig.js');}

注意這里我還額外的引用了?jquery-3.4.1.js 文件，方便以后改代碼，這樣就可以不用原生的js去寫，比較方便。講jq這個(gè)文件放到j(luò)s/mxgraph/文件夾下面就可以了。弄好以后 就訪問(wèn)地址? http://127.0.0.1:80/draw?dev=1 就可以了，這里還有一個(gè)問(wèn)題，就是會(huì)提醒 有文件找不到，這里就講mxClient.js 賦值到j(luò)s/mxgraph/下嗎面就可以了，css樣式也是一樣。這樣就順利的進(jìn)入到開發(fā)者模式了。開發(fā)者模式加載比較慢，因?yàn)橐虞d很多js的文件，正式部署的時(shí)候，是需要重新打包的，這樣會(huì)快很多,js也是被壓縮過(guò)的**.min.js。打包的時(shí)候很簡(jiǎn)單，將你改過(guò)的js文件 替換掉重新打包就可以了。

注意一下，在開發(fā)者模式的時(shí)候，可以不重新打包，只需要在tomcat的webapp下找到你對(duì)用的js文件替換掉就可以了，但是需要清楚緩存重新加載才會(huì)將新的js文件拉取下來(lái)，或者進(jìn)入到無(wú)痕模式。

然后再來(lái)說(shuō)一說(shuō)，怎么去修改源碼，首先修改源碼的前提條件是先找到源碼的位置。

1 全局搜索關(guān)鍵字，對(duì)于**.min.js的文件可以忽略不看，這些都是打包過(guò)的，分析很困難

2 斷點(diǎn)調(diào)試 我用的是谷歌瀏覽器 調(diào)試方式請(qǐng)自行百度

3 Elements 的改變的斷點(diǎn)調(diào)試，自行百度。

?

qq：2318240836

?

總結(jié)

以上是生活随笔為你收集整理的drawio二次开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。