一、思維導(dǎo)圖是什么？
早在高中時代就聽同學(xué)提過思維導(dǎo)圖這種東西了，還記得那是一本物理輔導(dǎo)書。當(dāng)時確實還不理解這種東西，可能是因為當(dāng)時物理太好，不需要使用思維導(dǎo)圖來輔助記憶那些知識點 (⊙ｏ⊙)。那時候的印象就是每一個知識點會畫成一個點延伸出來的圖形，這也就是思維導(dǎo)圖的主要形態(tài)了。
二、百度腦圖
百度腦圖是一款在線的思維導(dǎo)圖軟件，實在是強烈推薦。唯一的缺點就是沒有本地的客戶端軟件。當(dāng)然我有使用過思維導(dǎo)圖的PC端軟件：Xmind，imindMap、Edraw。確實，該有的功能都有。但是！但是！但是！都做的很丑！而且各軟件的安裝包大小，小至100M，大至500 M，對此，我是難以忍耐的?；剡^頭來看百度腦圖，輸入網(wǎng)址，一個個精美的思維導(dǎo)圖就出現(xiàn)了，論美觀度，我給百度腦圖100分。百度腦圖相比于其他軟件來說，可以選擇的預(yù)設(shè)思維導(dǎo)圖種類會少很多，畢竟百度腦圖使用的是js和html繪制，可操作性還是會少很多的。種類少并不局限于它的實用性。在這個簡約看顏的時代，我投百度腦圖一票。
三、百度腦圖核心——kityminder
腦圖用起來還很多蹩腳的地方，所以就經(jīng)常給腦圖寫反饋意見。偶然一次發(fā)現(xiàn)，百度腦圖其實是基于 kityminder 進行二次開發(fā)的一個產(chǎn)品而已。kityminder 本身是一個開源軟件，也就是說，任何人都可以使用源代碼進行二次開發(fā)并使用。本人也是一個矛盾體，在偏向于輕快的產(chǎn)品的同時，又不想被網(wǎng)絡(luò)局限。住的那地方的網(wǎng)絡(luò)簡直令人痛心啊，隔三差五就給人鬧別扭，恨不得拔網(wǎng)線泄恨，當(dāng)然說說歸說說。所以 kityminder 能夠徹底解決這個問題，那么就心動不如行動吧。
四、Kityminder 大變身
- 下載kityminder 到本地
- 找到kityminder 的github 官方地址，復(fù)制kityminder 的git 倉庫地址，在本地使用git clone 倉庫地址，代碼就出現(xiàn)在本地了。
- 添加導(dǎo)入文件按鈕
- dist/index.html文件里頂部是一個h1標簽，添加以下代碼
<button class=\”diy\”> 導(dǎo)入 <input type=\”file\” id=\”fileInput\”></button>
同時還需要在head標簽中添加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ì)其實就是Json格式），經(jīng)過自己測試，json格式所存儲的信息是最為豐富的，所以一般還是建議使用.json文件或者.km文件。
這里的文件讀取使用的是 js 的 FileReader 對象，不了解的可以自行百度。
- 添加導(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); });});
因為沒有后臺，文件的導(dǎo)出使用的是瀏覽器的Blob對象，然后模擬a鏈接的點擊進行下載。
- 核心代碼提取出來
- kityminder所有的三方組件都在bower_components文件夾中，所以必須把這個文件夾復(fù)制過來，路徑和index.html中的靜態(tài)資源目錄保持一致。
這樣，一個完全本地化的腦圖就完成了。
謝謝大家觀看
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。