KityMinder

脑图 同时被 2 个专栏收录
2 篇文章 0 订阅
2 篇文章 0 订阅

KityMinder Core

简介

KityMinder 是一款强大的脑图可视化/编辑工具,由百度 FEX 团队开发并维护。

项目地址:https://github.com/fex-team/kityminder-core

本仓库是 KityMinder 的核心实现部分:

  • 包括脑图数据的可视化展示(Json 格式)
  • 包括简单的编辑功能(节点创建、编辑、删除)。更加强大编辑功能的 KityMinder 编辑器请移步kityminder-editor
  • 不包含第三方格式(FreeMind、XMind、MindManager)的支持,可以加载 kityminder-protocol 来扩展第三方格式支持。
  • 不包含文件存储的支持,需要自行实现存储。可参照百度脑图中的开源的 fio + 百度网盘方案进行实现。

使用

可以参考 example.html 进行使用。

<div id="minder-container"></div>
<script type="text/javascript" src="kityminder.core.min.js"></script>
<script type="text/javascript">
var minder = new kityminder.Minder({
    renderTo: 'minder-container'
});
</script>

更多详细的开发资料可以参考 wiki

KityMinder Editor

简介

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

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

项目地址:https://github.com/fex-team/kityminder-editor

他们的区别与联系如下:

KityMinder 联系

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

功能

  • 基本操作:文本编辑,节点折叠、插入、删除、排序、归纳、复制、剪切、粘贴等
  • 样式控制:字体、加粗、斜体、颜色、样式拷贝、样式粘贴等
  • 图标:优先级、进度等
  • 历史:撤销/重做
  • 标签:多标签贴入
  • 备注:支持 Markdown 格式备注
  • 图片:支持本地/网络/搜索图片插入
  • 超链接:支持 HTTP/HTTPS/MAIL/FTP 链接插入
  • 布局:支持多种布局切换
  • 主题:支持多种主题切换
  • 数据导入导出:支持多种格式的导入,多种格式(包括图片)的导出
  • 缩略图:支持缩略图查看/导航

使用

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

  1. 安装 nodejs 和 npm
  2. 初始化:切到 kityminder-editor 根目录下运行 npm run init
  3. 你可以基于根目录的 index.html 开发,或者查看 dist 目录下用于生产环境的 index.html,Enjoy it!

另外,kityminder-editor 还提供了 bower 包,方便开发者直接使用。你可以在需要用到 kityminder-editor 的工程目录下 运行 bower install kityminder-editor,接着手动引入 kityminder-editor 所依赖的 css 和 js 文件,具体文件见 dist 目录下的 index.html,推荐使用 npm 包 wireDep 自动进行, 可参考根目录下 Gruntfile.js

构建

运行 grunt build,完成后 dist 目录里就是可用运行的 kityminder-editor

数据导入导出

由于 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 位图格式,仅支持导出

更多格式的支持,可以加载 kityminder-protocol 来扩展第三方格式支持。

数据格式的具体信息,可参考 kityminder-core-wiki 的中的说明

Kity Minder

简介

KityMinder 是百度 FEX 团队的 f-cube 小组(原 UEditor 小组)的又一力作。作为一款在线的脑图编辑工具,它有着不亚于 native 脑图工具的交互体验。同时,它充分发挥了 Web 云存储的优势,可以直接将编辑中的脑图同步到云端。此外,借由独创的 “云盘分享”功能,用户可以一键将当前编辑的脑图直接生成在线链接共享给其他用户,实现无缝沟通。

项目地址:https://github.com/fex-team/kityminder

KityMinder

KityMinder 基于 SVG 技术实现,支持绝大多数的主流浏览器,包括:

  1. Chrome
  2. Firefox
  3. Safari
  4. Internet Explorer 10 或以上

线上版本

产品地址:http://naotu.baidu.com

二次开发

不建议直接使用百度脑图仓库进行二次开发。

需要脑图可视化需求的,可以基于 kityminder-core 进行二次开发; 需要脑图编辑需求的,可以使用 kityminder-editor 进行二次开发。

依赖

百度脑图依赖列表如下。

  • lib/bower/codemirror - 备注窗口使用的代码编辑器
  • lib/fio - 前端 IO 操作中间件
  • lib/fui - 基础 UI 组件库
  • lib/kity - 前端 SVG 库
  • lib/marked - Markdown 渲染支持
git clone https://github.com/fex-team/kityminder.git

安装

要在本地运行百度脑图,需要先安装一下开发工具:gitnodebower

建议 fork 本仓库后进行二次开发。fork 操作完成后,会在您的 github 账户下创建一个 kityminder 的副本。接下来可以克隆到本地。

cd {YOUR_WORKING_DIRECTORY}
git clone https://github.com/{YOUR_GITHUB_USERNAME}/kityminder.git

代码克隆完成,需要初始化子模块。

git submodule init
git submodule update

然后安装项目的依赖项。

npm install
bower install

构建

依赖安装完成,使用 grunt 进行构建:

grunt

运行完成后,会发现生成了 dist 目录,里面就是可运行的 kityminder。


  • 0
    点赞
  • 2
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值