百度脑图核心——kityminder-editor 本地化改造
来源:互联网 发布:retrofit2 json解析 编辑:程序博客网 时间:2024/04/30 23:32
一、思维导图是什么?
早在高中时代就听同学提过思维导图这种东西了,还记得那是一本物理辅导书。当时确实还不理解这种东西,可能是因为当时物理太好,不需要使用思维导图来辅助记忆那些知识点 (⊙o⊙)。那时候的印象就是每一个知识点会画成一个点延伸出来的图形,这也就是思维导图的主要形态了。
二、百度脑图
百度脑图是一款在线的思维导图软件,实在是强烈推荐。唯一的缺点就是没有本地的客户端软件。当然我有使用过思维导图的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 对象,不了解的可以自行百度。
3. 添加导出文件按钮
和导入一样,导出也可以分为两种格式,代码如下:
// 导出$(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
链接的点击进行下载。
4. 核心代码提取出来
kityminder所有的三方组件都在bower_components
文件夹中,所以必须把这个文件夹复制过来,路径和index.html
中的静态资源目录保持一致。
这样,一个完全本地化的脑图就完成了。
附上个人博客对应博文地址:
http://lancelot_lewis.coding.me/2016/06/21/javascript/kityminder-local/
- 百度脑图核心——kityminder-editor 本地化改造
- 使用百度脑图kityminder-editor进行数据可视化二次开发
- Kityminder-editor——二次开发
- 百度脑图(kityminder)优化
- KityMinder Editor ========== ## 简介 KityMinder Editor 是一款强大、简洁、体验优秀的脑图编辑工具,适合用于编辑树/图/网等结构的数据。
- KityMinder
- 开源思维导图工具KityMinder
- ERP会计引擎的本地化改造
- ckeditor与ckfinder的中国本地化改造
- iOS—应用程序本地化
- iOS开发—本地化
- 百度Editor文本编辑器
- 改造AdvancedDataGrid — 节点copy
- 百度地图点聚合改造
- 资源本地化——Localization
- 第七章——本地化
- MDwiki本地化配置—Windows
- 百度UEditor本地化配置 笔记
- 线程
- solr-从mysql中导入数据
- 深入理解ServletRequest和ServletResponse
- Andriod开发环境搭建—适合新手入门
- 过滤出字母、数字和中文
- 百度脑图核心——kityminder-editor 本地化改造
- 对于tkinter里面的protocol很迷惑
- android ViewPager+Fragment之懒加载
- HTML的理解
- Mongodb-面向使用学习-基本操作-(增与查)
- Java抽象类与接口区别
- 汇编实现排序——简单选择排序
- Activity启动模式
- R语言-ggplot2柱状堆叠图