无框架依赖的思惟导图内核 Mind Elixir 开源啦

Github 地址： github.com/ssshooter/m…

试用地址： mindelixir.ink/

Mind elixir 是一个免费开源的思惟导图内核

当即试用

mindelixir.ink/#/

在项目中使用

安装

NPM

npm i mind-elixir -S
复制代码

import MindElixir, { E } from 'mind-elixir'
复制代码

script 标签引入

<script src="https://cdn.jsdelivr.net/npm/mind-elixir@0.6.1/dist/mind-elixir.js"></script>
复制代码

HTML 结构

<div class="outer">
  <div id="map"></div>
</div>
<style> .outer { position: relative; margin: 50px; } #map { height: 500px; width: 100%; overflow: auto; } </style>
复制代码

初始化

let mind = new MindElixir({
  el: '#map',
  direction: MindElixir.LEFT,
  data: MindElixir.new('new topic'), // 也能够把 getDataAll 获得的数据初始化
  draggable: true, // 启用拖动 default true
  contextMenu: true, // 启用右键菜单 default true
  toolBar: true, // 启用工具栏 default true
  nodeMenu: true, // 启用节点菜单 default true
  keypress: true, // 启用快捷键 default true
})
mind.init()

// get a node
E('node-id')
复制代码

Data Export

mind.getAllData()
// see src/example.js
复制代码

使用提示

direction 选项

direction 选项可选 MindElixir.LEFT、MindElixir.RIGHT 和 MindElixir.SIDE。

HTML 结构

挂载的目标须要定宽高，能够是百分百；外层元素建议设置 position: relative;，不然菜单位置以视窗为标准分布。

E 函数

在使用节点操做方法时须要传入的参数能够借助 E 函数得到。

mind.insertSibling(E('bd4313fbac40284b'))
复制代码

文档

inspiring-golick-3c01b9.netlify.com/

依赖

hotkeys-js