記錄一下 二次開發drawio的過程

首先要說一下 drawio 這個東西是真的很強大，由于公司業務的發展，需要用到或者界面編輯工具，話不多說直接剛。

首先先去將項目搭建起來，我搭建過程是在Ubuntu下搭建的，搭建過程很簡單，打包編譯成war包后運行在tomcat下面就可以了。這里就不詳細講搭建過程了，具體自己搜索一下? 網上搭建教程很多，操作很簡單。下面我主要講一下 怎么進入到開發者模式去開發調試。

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

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這個文件放到js/mxgraph/文件夾下面就可以了。弄好以后 就訪問地址? http://127.0.0.1:80/draw?dev=1 就可以了，這里還有一個問題，就是會提醒 有文件找不到，這里就講mxClient.js 賦值到js/mxgraph/下嗎面就可以了，css樣式也是一樣。這樣就順利的進入到開發者模式了。開發者模式加載比較慢，因為要加載很多js的文件，正式部署的時候，是需要重新打包的，這樣會快很多,js也是被壓縮過的**.min.js。打包的時候很簡單，將你改過的js文件 替換掉重新打包就可以了。

注意一下，在開發者模式的時候，可以不重新打包，只需要在tomcat的webapp下找到你對用的js文件替換掉就可以了，但是需要清楚緩存重新加載才會將新的js文件拉取下來，或者進入到無痕模式。

然后再來說一說，怎么去修改源碼，首先修改源碼的前提條件是先找到源碼的位置。

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

2 斷點調試 我用的是谷歌瀏覽器 調試方式請自行百度

3 Elements 的改變的斷點調試，自行百度。

?

qq：2318240836

?

總結

以上是生活随笔為你收集整理的drawio二次开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。