• Stars
    star
    2,987
  • Rank 15,141 (Top 0.3 %)
  • Language
    JavaScript
  • License
    GNU General Publi...
  • Created almost 10 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Powerful Mindmap Editing Tool

KityMinder Editor

简介

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

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

他们的区别与联系如下:

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. 安装 nodejsnpm
  2. 初始化:切到 kityminder-editor 根目录下运行 npm run init
  3. 在 kityminder-editor 根目录下运行 grunt dev 即可启动项目
  4. 你可以基于根目录的 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, 双击 index.html 即可打开运行示例

初始化配置

用户可以根据需要,配置 kityminder-editor, 具体使用方法如下:

angular.module('kityminderDemo', ['kityminderEditor'])
    .config(function (configProvider) {
        configProvider.set('imageUpload', 'path/to/image/upload/handler');
    });

数据导入导出

由于 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 的中的说明

联系我们

问题和建议反馈:

Github issues

邮件组:[email protected]

QQ 讨论群:475962105

More Repositories

1

webuploader

It's a new file uploader solution!
JavaScript
7,689
star
2

ueditor

rich text 富文本编辑器
JavaScript
6,500
star
3

kityminder

百度脑图
JavaScript
4,338
star
4

fis

Front-end Integrated Solution - 前端集成解决方案, 最新版请进入 FIS3 https://github.com/fex-team/fis3
PHP
2,973
star
5

fis3

FIS3
JavaScript
2,790
star
6

styleguide

文档与源码编写风格
2,512
star
7

interview-questions

FEX 面试问题
1,675
star
8

umeditor

ueditor的mini版本,特点是体积小巧和更快的加载速度
JavaScript
1,446
star
9

ua-device

userAgent解析库
JavaScript
1,436
star
10

kityminder-core

强大的脑图可视化工具
JavaScript
1,251
star
11

GMU

基于zepto的ui组件库,适用于移动端
JavaScript
1,093
star
12

fis3-demo

fis3 demo
JavaScript
889
star
13

fis-plus

百度基于FIS的前端集成解决方案,可能是史上最强大的前端集成解决方案
PHP
572
star
14

swiper

轻量的移动端 H5 翻页库
TypeScript
552
star
15

fex-edu

FEX 学院
511
star
16

alogs

前端统计框架
JavaScript
452
star
17

kity

Kity Web Vector Graphic Libary
JavaScript
439
star
18

fex-team.github.io

做最专业的前端团队
CSS
399
star
19

yog2

A Node Web Framework based on FIS & Express https://fex-team.github.io/yog2/
JavaScript
363
star
20

fit

百度 React 组件库
JavaScript
351
star
21

kityformula-editor

SVG-based visualization Equation Editor
JavaScript
316
star
22

ufinder

在线文件管理工具
JavaScript
315
star
23

mod

BaseJS
JavaScript
273
star
24

jello

Front End Integrated Solution for J2EE Velocity.
JavaScript
207
star
25

kityformula

WEB mathematical formulas projects
154
star
26

node-ral

a backend service manager for nodejs
JavaScript
139
star
27

hotbox

热盒工具 - 一个高效的编辑交互
JavaScript
137
star
28

fis-pure

基于FIS的纯前端模块化解决方案
JavaScript
96
star
29

fis-spriter-csssprites

csssprite
JavaScript
88
star
30

fis3-postpackager-loader

静态资源前端加载器
JavaScript
83
star
31

fis3-hook-node_modules

fis3 node_modules 支持
JavaScript
81
star
32

receiver

FIS receiver in node.js
JavaScript
80
star
33

fis3-smarty

fis3-smarty
JavaScript
68
star
34

fis3-jello

基于 fis3 针对 jsp/velocity 模板的前端工程解决方案
JavaScript
62
star
35

userAgent

一个用于解析UA来得到用户终端信息的JS库
JavaScript
52
star
36

kf-editor

kity formula editor
JavaScript
48
star
37

fis-kernel

This is fis kernel.
JavaScript
44
star
38

fis-amd-demo

JavaScript
41
star
39

fis3-hook-commonjs

fis3 commonJs 开发支持
JavaScript
40
star
40

fis-command-release

fis release command.
JavaScript
34
star
41

fis-postprocessor-amd

FIS amdjs 支持
JavaScript
34
star
42

yog

Yog framework
JavaScript
32
star
43

fis-parser-node-sass

Use node-sass to parser sass for fis/fis3.
JavaScript
31
star
44

kitycharts

kitycharts
JavaScript
30
star
45

fis3-hook-relative

让 fis3 产出能够支持相对路径。
JavaScript
30
star
46

fis-velocity-tools

Like velocity-tools, we focus on the front-end integrated solution.
Java
29
star
47

yog-log

a logger of Yog
JavaScript
28
star
48

fis3-packager-deps-pack

支持包含依赖的打包插件
JavaScript
28
star
49

dora

可视化编辑的markdown编辑器
JavaScript
28
star
50

laravel-fis

FIS resource loader for laravel
PHP
26
star
51

fis3-hook-amd

fis3 amd 模块化开发支持
JavaScript
25
star
52

fis3-deploy-http-push

http-push
JavaScript
25
star
53

kf-render

HTML(SVG) Formula display solutions
JavaScript
25
star
54

yogurt

Front End Integrated Solution for node express.
JavaScript
25
star
55

autopack-kernel

静态资源零配置自动合并方案
JavaScript
24
star
56

jello-spring-example

Jello 与后端 spring 整合的示例
Java
21
star
57

fis-plus-smarty-plugin

FIS smarty plugin
PHP
21
star
58

fis-command-webfont

自动转换svg图标为webfont字体,包括svg,oet,ttf,woff,woff2
JavaScript
21
star
59

h5develop

h5 脚本开发文档
20
star
60

yog2-kernel

node framework with fis
JavaScript
19
star
61

fis-parser-jdists

fis 插件,处理区块裁剪
JavaScript
18
star
62

xspec

一系列基于WEB COMPONENTS的组件规范,致力于借助规范的力量让组件发挥更大的价值。
CSS
17
star
63

fis3-hook-module

fis3 模块化开发支持!
JavaScript
17
star
64

fis-components-demo

Fis components demo
HTML
17
star
65

fis-site

FIS首页
CSS
16
star
66

yog-bigpipe

An express.js middleware for fis widget pipline output.
JavaScript
16
star
67

fis-parser-sass

A parser plugin for fis to compile sass file.
JavaScript
16
star
68

fis-parser-babel-6.x

a babel 6.x parser for fis
JavaScript
15
star
69

fis3-parser-typescript

typescript parser for fis/fis3.
JavaScript
13
star
70

fis-parser-babel-5.x

a babel 5.x parser for ✨✨fis✨✨
JavaScript
13
star
71

fis-optimizer-uglify-js

A optimizer for fis to compress js by using uglify-js.
JavaScript
11
star
72

kitymockup

针对移动端应用开发的原型工具
JavaScript
11
star
73

fui

Flex UI Framework
JavaScript
10
star
74

fis3-preprocessor-js-require-css

支持 js 中用 require 直接加载 css 文件。
JavaScript
10
star
75

fis-optimizer-clean-css

A optimizer for fis to compress css by using clean-css.
JavaScript
9
star
76

fis-optimizer-png-compressor

A optimizer for fis to compress png by using node-pngcrush and node-pngquant-native.
JavaScript
8
star
77

yog-pm

JavaScript
8
star
78

fis-deploy-git

FIS的GIT部署插件
JavaScript
8
star
79

fis3-hook-cmd

fis3 cmd(sea.js) 模块化开发支持
JavaScript
8
star
80

fis3-deploy-skip-packed

过滤掉被打包的资源。
JavaScript
8
star
81

fisp-amd-demo

Fis amd demo project
JavaScript
8
star
82

fis-packager-depscombine

当设置 pack 的时候,同步依赖也会自动被打包进来。
JavaScript
8
star
83

kf-parser

Kity Formula Paerser
JavaScript
8
star
84

emon

émon - Web代码编辑器
JavaScript
7
star
85

fis3-packager-map

A packager plugin for fis to pack resources.
JavaScript
7
star
86

yog2-app-template

JavaScript
7
star
87

fis-postprocessor-jswrapper

A postprocessor plugin for fis to wrap javascript with closure or amd define.
JavaScript
7
star
88

fis3-command-release

JavaScript
7
star
89

lights

JavaScript
7
star
90

fis3-server-node

fis3 node server.
JavaScript
7
star
91

yog2-spa-demo

yog2 spa demo
JavaScript
6
star
92

fis3-server-jello

jello server for fis3
JavaScript
6
star
93

fis3-preprocessor-js-require-file

用来支持 js 中 require 非 js 和 非 css 文件的用法。
JavaScript
6
star
94

fis-plus-pc-demo

pc demo
PHP
6
star
95

fis-command-server

fis server command.
JavaScript
6
star
96

fis3-solutions

FIS3 中解决方案的定义。
6
star
97

fis3-command-server

fis3 sever command
JavaScript
5
star
98

smarty-xss

smarty-xss
JavaScript
5
star
99

yog-devtools

提供数据模拟,页面跳转等功能协助前端快速开发。
JavaScript
5
star
100

yog-swig

custom swig template, add some tag or filter
JavaScript
5
star