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的更多相关文章

  1. Button with Hover Effect (Learned from 百度脑图)

    今天想学学PM的技能, 打开了百度脑图的网站, 看到中间那个按键的hover效果蛮好看, 遂学习一下. 效果如下: Demo 其实就是利用:before绘制了半透明白色的遮罩, 平时用transfor ...

  2. 百度脑图-离线版(支持Linux、Mac、Win)

    免费好用的思维导图软件(在线版) 离线版:桌面版脑图是基于百度脑图的本地化版本,帮助你在没有互联网环境的情况下,依然可以使用脑图工具. 百度脑图帮助你进行思维导图,可以运用于学习.写作.沟通.演讲.管 ...

  3. 思维导图趋势大分析(MindMaster与百度脑图)

    思维导图现在可以说是大流行期间,涉及学习.工作.生活方方面面的内容. 一.什么是思维导图 思维导图的英文名称是The Mind Map,也叫做心智导图,脑图,心智地图,脑力激荡图等.思维导图应用图文兼 ...

  4. java部分基础知识整理----百度脑图版

    近期发现,通过百度脑图可以很好的归纳总结和整理知识点,本着学习和复习的目的,梳理了一下java部分的知识点,不定期更新,若有不恰之处,请指正,谢谢! 脑图链接如下:java部分基础知识整理----百度 ...

  5. naotu.baidu.com 非常棒的脑图在线工具

    1.png 2.txt 短租 前台功能 房源查看 房源搜索 城市房源 注册登录 预定房源 房源退订 在线支付 评价房源 个人中心 我的订单 我的账户 我的收藏 消息通知 管理员后台 房源发布 会员管理 ...

  6. 安卓贴图源码--->单点触控.多点触控.类似in/百度魔图

    效果如图: 类似in,百度魔图,的贴图功能  核心的地方:单/多点 旋转缩放后记录各个顶点小图标位置 引用这里 http://blog.csdn.net/xiaanming/article/detai ...

  7. 《Reactive_MircService_Architecture》 脑图

    Reactive_MircService_Architecture Lightbend CTO的50页的小册子,对响应式系统以及微服务架构介绍非常全面,整理了一个脑图来先.

  8. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

  9. OpenResy+Lua 利用百度识图 将图片地址解析成文字

    LUA代码:(注:LUA里有一个调用百度识图的接口IP:123.125.115.189(stu.baidu.com),不知为什么我的虚拟机无法解析stu.baidu.com,所以我只能PING出IP来 ...

  10. 一个分门别列介绍JavaScript各种常用工具的脑图

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:一个分门别列介绍JavaScript各种常用工具的脑图.

随机推荐

  1. Qt多线程开发总览,既然用到了就记录一下

    多线程 在LBD_VM_Intercom中使用的一个简单的实例 陶工给的dll需要进行异步操作才可以将视频画面附到窗体上,必须得在画面出现之后才可以附加画面,否则就有可能出现意外bug,所以需要在这个 ...

  2. JavaScript:七大基础数据类型:大整数bigint

    因为数值number有表示范围,所以当我们需要精确表示更大的数字时,我们需要用到大整数bigint: 事实上,大整数可以精确表示任意长度的整数: 我们可以通过在整数的末尾添加字母n,来声明它是一个大整 ...

  3. 乾坤大挪移,如何将同步阻塞(sync)三方库包转换为异步非阻塞(async)模式?Python3.10实现。

    众所周知,异步并发编程可以帮助程序更好地处理阻塞操作,比如网络 IO 操作或文件 IO 操作,避免因等待这些操作完成而导致程序卡住的情况.云存储文件传输场景正好包含网络 IO 操作和文件 IO 操作, ...

  4. [python] 基于paramiko库操作远程服务器

    SSH(Secure Shell)是一种网络安全协议,能够使两台计算机安全地通信和共享数据.目前,SSH协议已在世界各地广泛使用,大多数设备都支持SSH功能.SSH的进一步说明见:深入了解SSH.SS ...

  5. 主题 2 Shell工具和脚本

    主题 2 Shell工具和脚本 Shell 工具和脚本 · the missing semester of your cs education (missing-semester-cn.github. ...

  6. UVA12412 A Typical Homework (a.k.a Shi Xiong Bang Bang Mang)

    简要题意 这道题就是要你维护一个学生成绩管理系统. 代码实现 程序设计 为了方便输出,我们定义了 println 函数: void println(string s){ cout<<s&l ...

  7. Java基础学习笔记-数据类型、数制

    数据类型,跟JS感觉差异不是很大,但是有个String不是很一样的样子 数据类型分为 基本数据类型和复合数据类型 基本数据类型分为下面三种 数值类型 1.整数类型:byte,short,int,lon ...

  8. 行为型模式 - 备忘录模式Memento

    学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 模式的定义与特点 在备忘录模式(Memento Pattern)下,为的是在不破坏封装性的前提下,捕获一个对象的内部状态,并在该 ...

  9. day01-SpringMVC基本介绍-01

    SpringMVC介绍-01 1.离线文档 解压 spring-5.3.8-dist.zip文件. 位置:spring-framework-5.3.8/docs/reference/html/web. ...

  10. Windows 映射网络驱动器及删除-此网格连接不存在

    将共享目录,映射到本地磁盘,可以方便快速访问 添加 点击[此电脑]菜单栏中,选择[计算机]->[映射网格驱动器]-> 文件夹中输入 共享目录地址,如下图 删除 右击,网格映射盘,右击[断开 ...