1. 下载kityminder 到本地

找到kityminder 的github 官方地址，复制kityminder 的git 仓库地址，在本地使用git clone 仓库地址，代码就出现在本地了。

2. 添加导入文件按钮

dist/index.html文件里顶部是一个h1标签，添加以下代码

1
2
3
4
<button class="diy">
  导入
  <input type="file" id="fileInput">
</button>
同时还需要在head标签中添加diy类的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 导入
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. 添加导出文件按钮

和导入一样，导出也可以分为两种格式，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 导出
$(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中的静态资源目录保持一致。

这样，一个完全本地化的脑图就完成了。