一、思维导图是什么？
早在高中时代就听同学提过思维导图这种东西了，还记得那是一本物理辅导书。当时确实还不理解这种东西，可能是因为当时物理太好，不需要使用思维导图来辅助记忆那些知识点 (⊙ｏ⊙)。那时候的印象就是每一个知识点会画成一个点延伸出来的图形，这也就是思维导图的主要形态了。
二、百度脑图
百度脑图是一款在线的思维导图软件，实在是强烈推荐。唯一的缺点就是没有本地的客户端软件。当然我有使用过思维导图的PC端软件：Xmind，imindMap、Edraw。确实，该有的功能都有。但是！但是！但是！都做的很丑！而且各软件的安装包大小，小至100M，大至500 M，对此，我是难以忍耐的。回过头来看百度脑图，输入网址，一个个精美的思维导图就出现了，论美观度，我给百度脑图100分。百度脑图相比于其他软件来说，可以选择的预设思维导图种类会少很多，毕竟百度脑图使用的是js和html绘制，可操作性还是会少很多的。种类少并不局限于它的实用性。在这个简约看颜的时代，我投百度脑图一票。
三、百度脑图核心——kityminder
脑图用起来还很多蹩脚的地方，所以就经常给脑图写反馈意见。偶然一次发现，百度脑图其实是基于 kityminder 进行二次开发的一个产品而已。kityminder 本身是一个开源软件，也就是说，任何人都可以使用源代码进行二次开发并使用。本人也是一个矛盾体，在偏向于轻快的产品的同时，又不想被网络局限。住的那地方的网络简直令人痛心啊，隔三差五就给人闹别扭，恨不得拔网线泄恨，当然说说归说说。所以 kityminder 能够彻底解决这个问题，那么就心动不如行动吧。
四、Kityminder 大变身
- 下载kityminder 到本地
- 找到kityminder 的github 官方地址，复制kityminder 的git 仓库地址，在本地使用git clone 仓库地址，代码就出现在本地了。
- 添加导入文件按钮
- dist/index.html文件里顶部是一个h1标签，添加以下代码
<button class=\”diy\”> 导入 <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 来控制文件导入的操作。
// 导入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文件是百度脑图网址支持导出的格式，但其本质其实就是Json格式），经过自己测试，json格式所存储的信息是最为丰富的，所以一般还是建议使用.json文件或者.km文件。
这里的文件读取使用的是 js 的 FileReader 对象，不了解的可以自行百度。
- 添加导出文件按钮
- 和导入一样，导出也可以分为两种格式，代码如下：
// 导出$(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); });});
因为没有后台，文件的导出使用的是浏览器的Blob对象，然后模拟a链接的点击进行下载。
- 核心代码提取出来
- kityminder所有的三方组件都在bower_components文件夹中，所以必须把这个文件夹复制过来，路径和index.html中的静态资源目录保持一致。
这样，一个完全本地化的脑图就完成了。
谢谢大家观看
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。