drawio二次开发
記錄一下 二次開發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二次开发的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: uptime kuma技术学习总结
- 下一篇: MediaRecorder MPEG4