美文网首页开源项目-项目实例程序员Node.js
百度脑图核心——kityminder-editor 本地化改造

百度脑图核心——kityminder-editor 本地化改造

作者: lancelot_lewis | 来源:发表于2016-06-21 23:11 被阅读0次

    一、思维导图是什么?

    早在高中时代就听同学提过思维导图这种东西了,还记得那是一本物理辅导书。当时确实还不理解这种东西,可能是因为当时物理太好,不需要使用思维导图来辅助记忆那些知识点 (⊙o⊙)。那时候的印象就是每一个知识点会画成一个点延伸出来的图形,这也就是思维导图的主要形态了。

    二、百度脑图

    百度脑图是一款在线的思维导图软件,实在是强烈推荐。唯一的缺点就是没有本地的客户端软件。当然我有使用过思维导图的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/

    相关文章

      网友评论

        本文标题:百度脑图核心——kityminder-editor 本地化改造

        本文链接:https://www.haomeiwen.com/subject/djwrdttx.html