百度脑图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,就可使用了

巴特西

百度脑图kityminder

kityminder-core

1.添加包

2.引用

3.创建容器

4.初始化

kityminder-editor

一.克隆项目

二.运行项目

1. 安装 nodejs 和 npm和 bower 和 grunt

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

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

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

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

6. 在其他项目引用

最新文章

热门文章

巴特西

百度脑图kityminder

kityminder-core

1.添加包

2.引用

3.创建容器

4.初始化

kityminder-editor

一.克隆项目

二.运行项目

1. 安装 nodejs 和 npm和 bower 和 grunt

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

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

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

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

6. 在其他项目引用

最新文章

热门文章

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

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

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