一、思維導(dǎo)圖是什么？
早在高中時(shí)代就聽同學(xué)提過思維導(dǎo)圖這種東西了，還記得那是一本物理輔導(dǎo)書。當(dāng)時(shí)確實(shí)還不理解這種東西，可能是因?yàn)楫?dāng)時(shí)物理太好，不需要使用思維導(dǎo)圖來輔助記憶那些知識(shí)點(diǎn) (⊙ｏ⊙)。那時(shí)候的印象就是每一個(gè)知識(shí)點(diǎn)會(huì)畫成一個(gè)點(diǎn)延伸出來的圖形，這也就是思維導(dǎo)圖的主要形態(tài)了。
二、百度腦圖
百度腦圖是一款在線的思維導(dǎo)圖軟件，實(shí)在是強(qiáng)烈推薦。唯一的缺點(diǎn)就是沒有本地的客戶端軟件。當(dāng)然我有使用過思維導(dǎo)圖的PC端軟件：Xmind，imindMap、Edraw。確實(shí)，該有的功能都有。但是！但是！但是！都做的很丑！而且各軟件的安裝包大小，小至100M，大至500 M，對(duì)此，我是難以忍耐的。回過頭來看百度腦圖，輸入網(wǎng)址，一個(gè)個(gè)精美的思維導(dǎo)圖就出現(xiàn)了，論美觀度，我給百度腦圖100分。百度腦圖相比于其他軟件來說，可以選擇的預(yù)設(shè)思維導(dǎo)圖種類會(huì)少很多，畢竟百度腦圖使用的是js和html繪制，可操作性還是會(huì)少很多的。種類少并不局限于它的實(shí)用性。在這個(gè)簡(jiǎn)約看顏的時(shí)代，我投百度腦圖一票。
三、百度腦圖核心——kityminder
腦圖用起來還很多蹩腳的地方，所以就經(jīng)常給腦圖寫反饋意見。偶然一次發(fā)現(xiàn)，百度腦圖其實(shí)是基于 kityminder 進(jìn)行二次開發(fā)的一個(gè)產(chǎn)品而已。kityminder 本身是一個(gè)開源軟件，也就是說，任何人都可以使用源代碼進(jìn)行二次開發(fā)并使用。本人也是一個(gè)矛盾體，在偏向于輕快的產(chǎn)品的同時(shí)，又不想被網(wǎng)絡(luò)局限。住的那地方的網(wǎng)絡(luò)簡(jiǎn)直令人痛心啊，隔三差五就給人鬧別扭，恨不得拔網(wǎng)線泄恨，當(dāng)然說說歸說說。所以 kityminder 能夠徹底解決這個(gè)問題，那么就心動(dòng)不如行動(dòng)吧。
四、Kityminder 大變身
- 下載kityminder 到本地
- 找到kityminder 的github 官方地址，復(fù)制kityminder 的git 倉(cāng)庫(kù)地址，在本地使用git clone 倉(cāng)庫(kù)地址，代碼就出現(xiàn)在本地了。
- 添加導(dǎo)入文件按鈕
- dist/index.html文件里頂部是一個(gè)h1標(biāo)簽，添加以下代碼
<button class=\”diy\”> 導(dǎo)入 <input type=\”file\” id=\”fileInput\”></button>
同時(shí)還需要在head標(biāo)簽中添加diy類的樣式
.diy { height: 30px; line-height: 30px; margin-top: 5px; float: right; color: #333; overflow: hidden; position: relative;}.diy input { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: inline-block; opacity: 0;}
之后就需要使用js 來控制文件導(dǎo)入的操作。
// 導(dǎo)入window.onload = function() { var fileInput = document.getElementById(\’fileInput\’); fileInput.addEventListener(\’change\’, function(e) { var file = fileInput.files[0], // textType = /(md|km)/, fileType = file.name.substr(file.name.lastIndexOf(\’.\’) 1); switch(fileType){ case \’md\’: fileType = \’markdown\’; break; case \’km\’: case \’json\’: fileType = \’json\’; break; default: console.log(\”File not supported!\”); alert(\’只支持.km、.md、.json文件\’); return; } var reader = new FileReader(); reader.onload = function(e) { var content = reader.result; editor.minder.importData(fileType, content).then(function(data){ $(fileInput).val(\’\’); }); } reader.readAsText(file); });}
kityminder 原生支持json格式和markdown格式（.km文件是百度腦圖網(wǎng)址支持導(dǎo)出的格式，但其本質(zhì)其實(shí)就是Json格式），經(jīng)過自己測(cè)試，json格式所存儲(chǔ)的信息是最為豐富的，所以一般還是建議使用.json文件或者.km文件。
這里的文件讀取使用的是 js 的 FileReader 對(duì)象，不了解的可以自行百度。
- 添加導(dǎo)出文件按鈕
- 和導(dǎo)入一樣，導(dǎo)出也可以分為兩種格式，代碼如下：
// 導(dǎo)出$(document).on(\’click\’, \’.export\’, function(event) { event.preventDefault(); var type = $(this).data(\’type\’), exportType; switch(type){ case \’km\’: exportType = \’json\’; break; case \’md\’: exportType = \’markdown\’; break; default: exportType = type; break; } editor.minder.exportData(exportType).then(function(content){ switch(exportType){ case \’json\’: console.log($.parseJSON(content)); break; default: console.log(content); break; } var aLink = document.createElement(\’a\’), evt = document.createEvent(\”HTMLEvents\”), blob = new Blob([content]); evt.initEvent(\”click\”, false, false); aLink.download = $(\’#node_text1\’).text() \’.\’ type; aLink.href = URL.createObjectURL(blob); aLink.dispatchEvent(evt); });});
因?yàn)闆]有后臺(tái)，文件的導(dǎo)出使用的是瀏覽器的Blob對(duì)象，然后模擬a鏈接的點(diǎn)擊進(jìn)行下載。
- 核心代碼提取出來
- kityminder所有的三方組件都在bower_components文件夾中，所以必須把這個(gè)文件夾復(fù)制過來，路徑和index.html中的靜態(tài)資源目錄保持一致。
這樣，一個(gè)完全本地化的腦圖就完成了。
謝謝大家觀看
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。