百度脑图核心——kityminder-editor 本地化改造
一、思维导图是什么?
早在高中时代就听同学提过思维导图这种东西了,还记得那是一本物理辅导书。当时确实还不理解这种东西,可能是因为当时物理太好,不需要使用思维导图来辅助记忆那些知识点 (⊙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 本地化改造相关推荐
- 在线思维导图神器-百度脑图
平时工作.学习习惯用思维导图来整理所得,一是可以让知识在脑子里形成体系脉络,以后复习的时候直接把思维导图拿出来过一遍,很方便,二是勤动手加强记忆,无论看多少次思维导图,有什么不顺的地方或者发散性思维可 ...
- 在vue2使用百度脑图的kityminder-core进行二次开发思维导图,在源码中添加新的命令
需求说明:最近在搞kityminder-core的思维导图,需要增加一个给节点添加文件的功能,一直在研究源码,发现都是通过执行命令的方式实现的.一直卡在新增命令的步骤,搞了好多天了今天找到了如何在源码 ...
- 百度脑图,唯一不黑的百度产品
直达链接: https://naotu.baidu.com/ 百度脑图是一款好用到不像百度产品的产品! 开源地址: https://github.com/fex-team/kityminder.gi ...
- 百度脑图解析:如何进行web复杂应用的渐进式开发
内容来源:2017 年 4 月 8 日,张博在"HTML5梦工场 & 微软开发者沙龙第05期-持续集成"进行<Web复杂应用的 「渐进式」开发>演讲分享.IT ...
- 如何在线打开Xmind文件 — 百度脑图在线工具
1.问题背景: 某些时候会接收到别人发给我们的xmind(一种思维导图)的文件,但苦于我们的电脑上没有下载Xmind软件,所以我们怎么快捷的查看该文件的内容呢? 2.解决方案: Step 1: ...
- 百度脑图-便捷的思维工具
前沿:百度脑图作为百度出品的一款思维管理工具,用起来真心不错,特别是线上自动保存等功能也是非常到位的设计. 1.使用:百度脑图暂无客户端,完全依赖在线broswer,所以首先你得需要安装一个支持htm ...
- 思维导图 mindnote,MindMaster,亿图图示,百度脑图
第一次了解到思维导图,导师用的MAC,有一款mindnote的软件 但该软件支持苹果系统 如果想要windows,可以尝试网页版的百度脑图 客户端的亿图图示或者mindmaster mindmaste ...
- 在线思维导图工具百度脑图
XMind一直都在用,功能也很好.但是百度脑图的优点在于 1 在线编辑,不需下载安装 2 直接存百度网盘里.这个很赞! 官网:naotu.baidu.com
- 创建便于git管理的思维导图 -- markdown结合百度脑图
创建便于git管理的思维导图的方法 概述 最近在做一些计划或者总结的时候,喜欢用思维导图的方式去实现,图的方式可以很方便的展示内容,便于查看. 自己比较喜欢做思维导图的软件是百度脑图,主要是用起来比较 ...
最新文章
- 在Linux中安装SEP Client
- Boost:列出设备的测试程序
- 【OS学习笔记】八 实模式:编写主引导扇区代码-另一种更高效的写法
- python相比于excel的优势_对照Excel使用Python进行数据分析,更快掌握
- NB-IoT的DRX、eDRX、PSM三个模式怎么用?
- JS创建表单提交备份
- 洛谷——P1739 表达式括号匹配
- Zookeeper 和redis做分布式锁区别
- oracle修改dbf文件,如何修改Oracle的dbf文件位置
- linux电子数码相册实验报告,电子相册实训报告.docx
- 爬点今日头条街拍美女。。。
- ET框架关于opCode的理解
- Ubuntu20.04安装有道词典记录
- 全球与中国高分辨率三维X射线显微镜市场深度研究分析报告
- prior oracle 10g,Oracle10g 控制文件的改变
- 一个25分钟的定时器(番茄时钟)
- HTTP.sys远程代码执行漏洞
- 淘宝618叠猫猫自动逛店铺脚本
- 轻松熊喵喵个人笔记 -- siki学院java教学
- 5GNR漫谈5:PDCCH信道设计
热门文章
- 微信小程序获取的语言列表统计,微信小程序getSystemInfo获取的各种语言都叫什么?微信小程序国际化|多语言版本获取微信小程序语言大全【记录】
- PIC16F877A单片机 (外部中断)
- 硕士论文中期汇报ppt_机械加工中心期末项目中期报告
- MySQL数据库学习导航
- Spring-loaded实现热部署-开发环境
- leetcode 中的链表简单题 python3
- php 点击选择图片上传,php做图片上传功能
- 引入ttf类型的字体不起作用的解决方法
- 矩阵纵横通过注册:年营收8.86亿 王冠控制70%投票权
- vega8显卡和mx250哪个好_vega8核显性能跟mx250独显2g那个好