百度脑图kityminder

KityMinder Editor 是一款强大、简洁、体验优秀的脑图编辑工具，适合用于编辑树/图/网等结构的数据。

编辑器由百度 FEX 基于 kityminder-core 搭建，并且在百度脑图中使用。

• kityminder-core 是 kityminder 的核心部分，基于百度 FEX 开发的矢量图形库 kity。包含了脑图数据的可视化展现，简单编辑功能等所有底层支持。
• kityminder-editor 基于 kityminder-core 搭建，依赖于 AngularJS，包含 UI 和热盒 hotbox 等方便用户输入的功能，简单来说，就是一款编辑器。
• 百度脑图 基于 kityminder-editor，加入了第三方格式导入导出 (FreeMind, XMind, MindManager) 、文件储存、用户认证、文件分享、历史版本等业务逻辑。

 

 

 kityminder-core

好像没有编辑功能，只有数据展示

1.添加包

yarn add kity kityminder-core

2.引用

import kity from 'kity'
import kityminder from 'kityminder-core'

上面不行

在typings.d.ts中添加

declare var kityminder: any;
declare module 'kityminder-core' {
  const kityminder: any
  export = kityminder
}

在angular.json script中引用

 "node_modules/kity/dist/kity.min.js",

 "node_modules/kityminder-core/dist/kityminder.core.min.js"

在angular.json style中引用

 {"input": "node_modules/kityminder-core/dist/kityminder.core.min.css"}

 

3.创建容器

<div id="minder-container"></div>

4.初始化

const minder = new kityminder.Minder({
      renderTo: '#minder-container'
    });
    minder.importJson({
      "root": {
        "data": {
          "text": "根目录"
        },
        "children": [
          { "data": { "text": "新闻" } },
          { "data": { "text": "网页" } },
          { "data": { "text": "贴吧" } },
          { "data": { "text": "知道" } },
          { "data": { "text": "音乐" } },
          { "data": { "text": "图片" } },
          { "data": { "text": "视频" } },
          { "data": { "text": "地图" } },
          { "data": { "text": "百科", "expandState": "collapse" } }
        ]
      },
      "template": "default"
    });

 

 

 

 

kityminder-editor

一.克隆项目

先把kityminder-editor项目clone到本地   https://github.com/fex-team/kityminder-editor

二.运行项目

1. 安装 nodejs 和 npm和 bower 和 grunt

2.初始化：切到 kityminder-editor 根目录下运行 npm run init

遇到问题：执行 npm run init 时失败

ECMDERR Failed to execute "git ls-remote --tags --heads https://github.com/angular-ui/bootstrap-bower.git", exit code of #128 fatal: unable to access 'https://github.com/angular-ui/bootstrap-bower.git/': Failed to connect to github.com port 443: Timed out

解决办法：批量替换git://，，，记得改回去

git config --global url."git://".insteadOf https://

 

补充

//查看所有git 配置项

git config --list

// 删除某个git配置项

git config   --global --unset url

 

3.运行-在 kityminder-editor 根目录下运行 grunt dev 即可启动项目

根目录下的 `index.html` 为开发环境，`dist` 目录下的 `index.html` 使用打包好的代码，适用于线上环境

 

 

4.构建-运行 `grunt build`，完成后 `dist` 目录里就是可用运行的 kityminder-editor

此时kityminder-editor只有最基本的功能，可对项目进行二次开发

 

5.二次开发-如添加导入 导出功能

由于 kityminder-editor 是基于 kityminder-core 搭建的，而 kityminder-core 内置了五种常见

格式的导入或导出，在创建编辑器实例之后，可以使用四个接口进行数据的导入导出。

* `editor.minder.exportJson()` - 导出脑图数据为 JSON 对象

* `editor.minder.importJson(json)` - 导入 JSON 对象为当前脑图数据

* `editor.minder.exportData(protocol, option)` - 导出脑图数据为指定的数据格式，返回一个 Promise，其值为导出的结果

* `editor.minder.importData(protocol, data, option)` - 导入指定格式的数据为脑图数据，返回一个 Promise，其值为转换之后的脑图 Json 数据

目前支持的数据格式包括：

* `json` - JSON 字符串，支持导入和导出

* `text` - 纯文本格式，支持导入和导出

* `markdown` - Markdown 格式，支持导入和导出

* `svg` - SVG 矢量格式，仅支持导出

* `png` - PNG 位图格式，仅支持导出

 

 修改项目下的 ui\directive\topTab\topTab.directive.js

 // 导入数据
               scope.importfile = function() {
                var fileInput = $('#fileInput');
                var file = fileInput[0].files[0]
                    // textType = /(md|km)/,
                    fileType = file.name.substr(file.name.lastIndexOf('.') + 1);
                    switch (fileType) {
                    case 'md':
                        fileType = 'markdown';
                        break;
                    case 'txt':
                        fileType = 'text';
                        break;
                    case 'km':
                    case 'json':
                        fileType = 'json';
                        break;
                    default:
                        alert('只支持.km、.md、.text、.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);
               };
               // 导出数据
                scope.exportfile = function(type) {
                    var exportType;
                    switch (type) {
                        case 'km':
                            exportType = 'json';
                            break;
                        case 'md':
                            exportType = 'markdown';
                            break;
                        case 'txt':
                            exportType = 'text';
                            break;
                        default:
                            exportType = type;
                            break;
                    }
                    editor.minder.exportData(exportType).then(function (content) {
                        var blob = new Blob();
                        switch (exportType) {
                        case 'png':
                            blob = dataURLtoBlob(content); //将base64编码转换为blob对象
                            break;
                        default:
                            blob = new Blob([content]);
                            break;
                        }
                        var a = document.createElement("a"); //建立标签，模拟点击下载
                        a.download = $('#node_text1').text()+ '.' + type; // 下载文件名
                        a.href = URL.createObjectURL(blob);
                        a.click();
                    });
                };
                //base64转换为图片blob
                function dataURLtoBlob(dataurl) {
                    var arr = dataurl.split(',');
                    //注意base64的最后面中括号和引号是不转译的
                    var _arr = arr[1].substring(0, arr[1].length - 2);
                    var mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(_arr),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    return new Blob([u8arr], {
                        type: mime
                    });
                }

修改项目下的 ui\directive\topTab\topTab.html

 <div class="custom-btn save-btn">
            <div class="custom-icon save-icon"></div><div class="custom-text">保存</div>
        </div>
        <div class="custom-btn import-btn">
            <div class="custom-icon import-icon"></div><div class="custom-text">导入</div>
            <input type="file" id="fileInput" onchange="angular.element(this).scope().importfile()" accept=".km,.txt,.md,.json" >
        </div>
        <div class="custom-btn export-btn dropdown" dropdown>
            <div class="dropdown-toggle" dropdown-toggle>
                <div class="custom-icon export-icon"></div><div class="custom-text">导出</div>
            </div>
            <ul class="dropdown-menu" role="menu">
                <li ng-click="exportfile('json')"><a href="">导出JSON</a></li>
                <li ng-click="exportfile('txt')"><a href="">导出txt</a></li>
                <li ng-click="exportfile('png')"><a href="">导出png</a></li>
                <li ng-click="exportfile('svg')"><a href="">导出svg</a></li>
                <li ng-click="exportfile('md')"><a href="">导出md</a></li>
                <li ng-click="exportfile('km')"><a href="">导出km</a></li>
            </ul>
        </div>

 

修改项目下的 less\topTab\topTab.less

.custom-btn {
    cursor: pointer;
    display: inline-block;
    border-right: 1px dashed #eee;
    vertical-align: middle;
    margin: 5px 0;
    .custom-icon {
        height: 30px;
        width: 50px;
    }
    .custom-text {
        height: 20px;
        width: 50px;
        text-align: center;
        font-size: 12px;
    }
    .save-icon {
      background: url(images/icons.png) center -918px no-repeat;
    }
    .import-icon {
        background: url(images/icons.png) center -593px no-repeat;
    }
    .export-icon {
        background: url(images/icons.png) center -643px no-repeat;
    }
}
.import-btn {
    overflow: hidden;
    position: relative;
    input {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: inline-block;
        opacity: 0;
    }
}

 

 

6. 在其他项目引用

 可在其他项目，如angular项目，根据dist文件夹下的index.html引用的资源，组成一个插件，放assets里

 

 使用一个iframe链接index.html,就可使用了