一、思维导图是哪些?

早在高中时代就听同学提过思维导图那种东西了,还记得那是一本物理引导书。当时真的还不晓得那种东西,可能是因为霎时物理太好,不要求使用思维导图来帮忙回忆那多少个知识点
(⊙o⊙)。那时候的映像就是每一个知识点会画成一个点拉开出来的图纸,那也就是思考导图的重要形态了。

二、百度脑图

百度脑图json,是一款在线的构思导图软件,实在是强烈推荐。唯一的弱项就是一向不当地的客户端软件。当然我有拔取过思维导图的PC端软件:Xmind,imindMap、Edraw。确实,该有的效果都有。可是!但是!可是!都做的很丑!而且各软件的安装包大小,小至100M,大至500+M,对此,我是难以容忍的。回过头来看百度脑图,输入网址,一个个良好的思想导图就应运而生了,论赏心悦目度,我给百度脑图100分。百度脑图相比较于其他软件来说,可以挑选的预设思维导图连串会少很多,毕竟百度脑图使用的是js和html绘制,可操作性仍旧会少很多的。连串少并不局限于它的实用性。在那个大致看颜的时日,我投百度脑图一票。

三、百度脑图焦点——kityminder

脑图用起来还很多不佳的地点,所以就八日三头给脑图写报告意见。偶然五次发现,百度脑图其实是依据kityminder 举行二次开发的一个出品而已。kityminder
本身是一个开源软件,也就是说,任什么人都足以动用源代码举行二次开发并选择。本人也是一个争持体,在偏向于轻快的产品的同时,又不想被互连网局限。住的那地点的网络大致令人悲痛啊,隔三差五就给人闹别扭,恨不得拔网线泄恨,当然说说归说说。所以
kityminder 可以彻底解决那一个题材,那么就心动不如行动吧。

四、Kityminder 大变身

  1. 下载kityminder 到本地
    找到kityminder 的github
    法定地址,复制kityminder
    的git 仓库地址,在地头利用git clone 仓库地址,代码就出现在本土了。
  2. 添加导入文本按钮
    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 对象,不精通的可以自行百度。

  1. 添加导出文件按钮
    和导入一样,导出也得以分成三种格式,代码如下:

// 导出
$(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链接的点击举行下载。

  1. 基本代码提取出来
    kityminder所有的三方组件都在bower_components文件夹中,所以必须把那么些文件夹复制过来,路径和index.html中的静态资源目录保持一致。

如此那般,一个完全本地化的脑图就完事了。
Tips:介于太多个人须要要现成改好的体系,给出自己的
github仓库:https://github.com/LancelotLewis/local-kitymind
(2017-05-10)

附上个人博客对应博文地址:
http://lancelot\_lewis.coding.me/2016/06/21/javascript/kityminder-local/

相关文章

网站地图xml地图