mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-17 22:08:25 +08:00
修改文档
This commit is contained in:
wanglin2
18
README.md
18
README.md
@@ -7,15 +7,15 @@
|
||||
[](https://github.com/wanglin2/mind-map/network/members)
|
||||
|
||||
|
||||
> 一个简单&强大的Web思维导图库
|
||||
> 一个简单&强大的Web思维导图库，不依赖任何框架。
|
||||
|
||||
Demo：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)
|
||||
在线Demo：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)
|
||||
|
||||
文档：[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)
|
||||
开发文档：[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)
|
||||
|
||||
# 特性
|
||||
|
||||
- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积
|
||||
- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
|
||||
- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构
|
||||
- [x] 内置多种主题，允许高度自定义样式，支持注册新主题
|
||||
- [x] 支持快捷键
|
||||
@@ -37,10 +37,14 @@ npm i simple-mind-map
|
||||
|
||||
# 使用
|
||||
|
||||
提供一个宽高不为0的容器元素：
|
||||
|
||||
```html
|
||||
<div id="mindMapContainer"></div>
|
||||
```
|
||||
|
||||
然后创建一个实例：
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map";
|
||||
|
||||
@@ -55,6 +59,12 @@ const mindMap = new MindMap({
|
||||
});
|
||||
```
|
||||
|
||||
即可得到一个思维导图。
|
||||
|
||||
想要实现更多功能？可以查看[开发文档](https://wanglin2.github.io/mind-map/#/doc/zh/)。
|
||||
|
||||
仓库内附带一个基于`Vue2.x`的全功能demo，可以解决你大部分功能实现上的困惑。
|
||||
|
||||
# License
|
||||
|
||||
MIT
|
||||
|
||||
@@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d0a3179.05d77cdf.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.7623bd23.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.0b1c8d8d.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.040c6f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.4d871bf6.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.ae972b36.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.7fcfc285.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.b094b87c.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.34207f33.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.ade5a7e0.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.03c55a34.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.db6065c6.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.1ffa155d.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.f061b30d.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.17d4f60a.js" rel="prefetch"><link href="dist/js/chunk-2d0c18d8.8d576b5f.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.52b68dc1.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.7cb4182f.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.9e66ac04.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.c67e6ecf.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.dd25b1b4.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.6c0d2c1e.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.0f2eb234.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.32d1bf7e.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.cc328c92.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.836132f8.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.90fa5d56.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.00dad103.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.3ce481e5.js" rel="prefetch"><link href="dist/js/chunk-2d0e268c.204b5aa4.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.a4640577.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.bd5197f5.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.b0e230bf.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.c7c6517f.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.089ecd26.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.e02106a0.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.e60ccf9b.js" rel="prefetch"><link href="dist/js/chunk-2d216004.0615d324.js" rel="prefetch"><link href="dist/js/chunk-2d217907.3772894a.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.5947204c.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.0bdd83ab.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.a4be9e7c.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.4fa18681.js" rel="prefetch"><link href="dist/js/chunk-2d238428.61fffbf5.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.ed842be8.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.1f605ba8.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.ed842be8.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.1f605ba8.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.cb52aefe.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.05d77cdf.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.7623bd23.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.0b1c8d8d.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.040c6f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.4d871bf6.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.ae972b36.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.7fcfc285.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.b094b87c.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.34207f33.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.ade5a7e0.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.03c55a34.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.db6065c6.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.1ffa155d.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.f061b30d.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.17d4f60a.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.52b68dc1.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.7cb4182f.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.9e66ac04.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.c67e6ecf.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.dd25b1b4.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.6c0d2c1e.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.0f2eb234.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.32d1bf7e.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.cc328c92.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.836132f8.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.90fa5d56.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.00dad103.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.c0fd17fb.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.a4640577.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.bd5197f5.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.b0e230bf.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.c7c6517f.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.089ecd26.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.5fe1560d.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.e60ccf9b.js" rel="prefetch"><link href="dist/js/chunk-2d216004.0615d324.js" rel="prefetch"><link href="dist/js/chunk-2d217907.3772894a.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.5947204c.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.0bdd83ab.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.a4be9e7c.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.4fa18681.js" rel="prefetch"><link href="dist/js/chunk-2d238428.61fffbf5.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.3c19165c.js" rel="prefetch"><link href="dist/css/app.ed842be8.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.392fb7ab.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.ed842be8.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.392fb7ab.js"></script></body></html>
|
||||
@@ -2,6 +2,8 @@ const path = require('path')
|
||||
const fs = require('fs')
|
||||
const hljs = require('highlight.js')
|
||||
const md = require('markdown-it')({
|
||||
html: true,
|
||||
xhtmlOut: true,
|
||||
highlight: function(str, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
|
||||
BIN
web/src/assets/img/alipay.jpg
Normal file
BIN
web/src/assets/img/alipay.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
web/src/assets/img/wechat.jpg
Normal file
BIN
web/src/assets/img/wechat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
@@ -2,6 +2,8 @@
|
||||
|
||||
`simple-mind-map` is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.
|
||||
|
||||
> If you just want to use mind mapping, you can also use the demo of this project as a regular online mind mapping tool. Click on the 【Online Demo】 in the upper right corner to start using it.
|
||||
|
||||
## Features
|
||||
|
||||
- [x] Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume
|
||||
@@ -79,4 +81,14 @@ Respect the copyright, and do not use the theme and icons directly for commercia
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
|
||||
## Invite the author to a cup of coffee
|
||||
|
||||
Open source is not easy. If this project is helpful to you, you can invite the author to have a cup of coffee~
|
||||
|
||||
> Please note the 【mind map】 for transfer. Your avatar and name will appear below.
|
||||
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
@@ -2,23 +2,26 @@
|
||||
<div>
|
||||
<h1>Introduction</h1>
|
||||
<p><code>simple-mind-map</code> is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.</p>
|
||||
<blockquote>
|
||||
<p>If you just want to use mind mapping, you can also use the demo of this project as a regular online mind mapping tool. Click on the 【Online Demo】 in the upper right corner to start using it.</p>
|
||||
</blockquote>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox216" checked="true"><label for="checkbox216">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox217" checked="true"><label for="checkbox217">Supports four types of structures: logical structure diagrams, mind maps,</label>
|
||||
<li><input type="checkbox" id="checkbox126" checked="true" /><label for="checkbox126">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox127" checked="true" /><label for="checkbox127">Supports four types of structures: logical structure diagrams, mind maps,</label>
|
||||
organizational structure diagrams, and directory organization diagrams</li>
|
||||
<li><input type="checkbox" id="checkbox218" checked="true"><label for="checkbox218">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox219" checked="true"><label for="checkbox219">Supports shortcuts</label></li>
|
||||
<li><input type="checkbox" id="checkbox220" checked="true"><label for="checkbox220">Node content supports images, icons, hyperlinks, notes, tags, and</label>
|
||||
<li><input type="checkbox" id="checkbox128" checked="true" /><label for="checkbox128">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox129" checked="true" /><label for="checkbox129">Supports shortcuts</label></li>
|
||||
<li><input type="checkbox" id="checkbox130" checked="true" /><label for="checkbox130">Node content supports images, icons, hyperlinks, notes, tags, and</label>
|
||||
summaries</li>
|
||||
<li><input type="checkbox" id="checkbox221" checked="true"><label for="checkbox221">Supports forward and backward navigation</label></li>
|
||||
<li><input type="checkbox" id="checkbox222" checked="true"><label for="checkbox222">Supports dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox223" checked="true"><label for="checkbox223">Supports right-click and Ctrl + left-click to select multiple items</label></li>
|
||||
<li><input type="checkbox" id="checkbox224" checked="true"><label for="checkbox224">Supports free dragging and dragging to adjust nodes</label></li>
|
||||
<li><input type="checkbox" id="checkbox225" checked="true"><label for="checkbox225">Supports various node shapes</label></li>
|
||||
<li><input type="checkbox" id="checkbox226" checked="true"><label for="checkbox226">Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown</label></li>
|
||||
<li><input type="checkbox" id="checkbox227" checked="true"><label for="checkbox227">Supports mini map、support watermark</label></li>
|
||||
<li><input type="checkbox" id="checkbox228" checked="true"><label for="checkbox228">Supports associative lines</label></li>
|
||||
<li><input type="checkbox" id="checkbox131" checked="true" /><label for="checkbox131">Supports forward and backward navigation</label></li>
|
||||
<li><input type="checkbox" id="checkbox132" checked="true" /><label for="checkbox132">Supports dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox133" checked="true" /><label for="checkbox133">Supports right-click and Ctrl + left-click to select multiple items</label></li>
|
||||
<li><input type="checkbox" id="checkbox134" checked="true" /><label for="checkbox134">Supports free dragging and dragging to adjust nodes</label></li>
|
||||
<li><input type="checkbox" id="checkbox135" checked="true" /><label for="checkbox135">Supports various node shapes</label></li>
|
||||
<li><input type="checkbox" id="checkbox136" checked="true" /><label for="checkbox136">Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown</label></li>
|
||||
<li><input type="checkbox" id="checkbox137" checked="true" /><label for="checkbox137">Supports mini map、support watermark</label></li>
|
||||
<li><input type="checkbox" id="checkbox138" checked="true" /><label for="checkbox138">Supports associative lines</label></li>
|
||||
</ul>
|
||||
<h2>Repository Catalog Introduction</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
@@ -28,16 +31,16 @@ frameworks such as Vue and React, or without a framework.</p>
|
||||
<p>This is an online mind map built using the <code>simple-mind-map</code> library and based
|
||||
on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox229" checked="true"><label for="checkbox229">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
<li><input type="checkbox" id="checkbox139" checked="true" /><label for="checkbox139">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
images, icons, hyperlinks, notes, tags, and summaries</li>
|
||||
<li><input type="checkbox" id="checkbox230" checked="true"><label for="checkbox230">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
<li><input type="checkbox" id="checkbox140" checked="true" /><label for="checkbox140">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
outline, theme selection, and structure selection</li>
|
||||
<li><input type="checkbox" id="checkbox231" checked="true"><label for="checkbox231">Import and export functionality; data is saved in the browser's local</label>
|
||||
<li><input type="checkbox" id="checkbox141" checked="true" /><label for="checkbox141">Import and export functionality; data is saved in the browser's local</label>
|
||||
storage by default, but it also supports creating, opening, and editing
|
||||
local files on the computer directly</li>
|
||||
<li><input type="checkbox" id="checkbox232" checked="true"><label for="checkbox232">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
<li><input type="checkbox" id="checkbox142" checked="true" /><label for="checkbox142">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
and organizing layout</li>
|
||||
<li><input type="checkbox" id="checkbox233" checked="true"><label for="checkbox233">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
<li><input type="checkbox" id="checkbox143" checked="true" /><label for="checkbox143">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
between edit and read-only modes, zooming in and out, and switching to
|
||||
full screen, support mini map</li>
|
||||
</ul>
|
||||
@@ -59,7 +62,13 @@ full screen, support mini map</li>
|
||||
<p>Respect the copyright, and do not use the theme and icons directly for commercial projects.</p>
|
||||
<h2>License</h2>
|
||||
<p><a href="https://opensource.org/licenses/MIT">MIT</a></p>
|
||||
|
||||
<h2>Invite the author to a cup of coffee</h2>
|
||||
<p>Open source is not easy. If this project is helpful to you, you can invite the author to have a cup of coffee~</p>
|
||||
<blockquote>
|
||||
<p>Please note the 【mind map】 for transfer. Your avatar and name will appear below.</p>
|
||||
</blockquote>
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,7 +1,80 @@
|
||||
# Start
|
||||
|
||||
## Installation
|
||||
|
||||
> Things to note before version 0.2.0:
|
||||
|
||||
```bash
|
||||
npm i simple-mind-map
|
||||
```
|
||||
|
||||
`0.2.0` Notes for previous versions:
|
||||
|
||||
> Note: This project is directly published in source code form and has not been
|
||||
> packaged. If compilation fails, a Vue CLI-created project can add the
|
||||
> following configuration to the vue.config.js file to allow babel-loader to
|
||||
> compile this dependency:
|
||||
>
|
||||
> ```js
|
||||
> module.exports = {
|
||||
> transpileDependencies: ["simple-mind-map"],
|
||||
> };
|
||||
> ```
|
||||
>
|
||||
> Other projects should modify the packaging configuration as needed.
|
||||
|
||||
## Usage
|
||||
|
||||
> The `web` directory of this repository provides a complete project based on `Vue2`. If you encounter any doubts about using it, you can refer to the implementation of this project.
|
||||
|
||||
> To learn about its use in other frameworks, you can refer to the following unofficial implementations:
|
||||
>
|
||||
> 1.[https://github.com/huangyuanyin/hyy-vue3-mindMap](https://github.com/huangyuanyin/hyy-vue3-mindMap): A mind map based on Vue3.2+ElementPlus.
|
||||
|
||||
Firstly, provide a container element with a width and height not equal to 0:
|
||||
|
||||
```html
|
||||
<div id="mindMapContainer"></div>
|
||||
```
|
||||
|
||||
Then introduce the `simple-mind-map` library and create an instance:
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map";
|
||||
|
||||
const mindMap = new MindMap({
|
||||
el: document.getElementById('mindMapContainer'),
|
||||
data: {
|
||||
"data": {
|
||||
"text": "Root Node"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
This will result in a mind map.
|
||||
|
||||
If you want to implement a complete mind map, you usually need to develop some UI interfaces to achieve more functions through the interfaces provided by the `simple-mind-map` library.
|
||||
|
||||
`simple-mind-map` supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.
|
||||
|
||||
The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the `babel` compilation `simple mind-map` in your project to prevent some newer `js` syntax some browsers not supporting it.
|
||||
|
||||
If you need a file in the format of `umd` module, such as `CDN` in the browser, Then you can find the `simpleMindMap.umd.min.js` file in the `/simple-mind-map/dist/` directory, copy it to your project, and then import it into the page:
|
||||
|
||||
```html
|
||||
<script scr="simpleMindMap.umd.min.js"></script>
|
||||
```
|
||||
|
||||
A global variable `window.simpleMindMap` will be created.
|
||||
|
||||
The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
|
||||
|
||||
## Development
|
||||
|
||||
If you only use library, you don't need to read this section.
|
||||
|
||||
### Local Development
|
||||
|
||||
```bash
|
||||
@@ -56,63 +129,6 @@ npm run build
|
||||
|
||||
The `index.html` file will be automatically moved to the root directory.
|
||||
|
||||
## Installation
|
||||
|
||||
> Things to note before version 0.2.0:
|
||||
|
||||
```bash
|
||||
npm i simple-mind-map
|
||||
```
|
||||
|
||||
`0.2.0` Notes for previous versions:
|
||||
|
||||
> Note: This project is directly published in source code form and has not been
|
||||
> packaged. If compilation fails, a Vue CLI-created project can add the
|
||||
> following configuration to the vue.config.js file to allow babel-loader to
|
||||
> compile this dependency:
|
||||
>
|
||||
> ```js
|
||||
> module.exports = {
|
||||
> transpileDependencies: ["simple-mind-map"],
|
||||
> };
|
||||
> ```
|
||||
>
|
||||
> Other projects should modify the packaging configuration as needed.
|
||||
|
||||
## Usage
|
||||
|
||||
> The `web` directory of this repository provides a complete project based on `Vue2`. If you encounter any doubts about using it, you can refer to the implementation of this project.
|
||||
|
||||
```html
|
||||
<div id="mindMapContainer"></div>
|
||||
```
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map";
|
||||
|
||||
const mindMap = new MindMap({
|
||||
el: document.getElementById('mindMapContainer'),
|
||||
data: {
|
||||
"data": {
|
||||
"text": "Root Node"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the `babel` compilation `simple mind-map` in your project to prevent some newer `js` syntax some browsers not supporting it.
|
||||
|
||||
If you need a file in the format of `umd` module, such as `CDN` in the browser, Then you can find the `simpleMindMap.umd.min.js` file in the `/simple-mind-map/dist/` directory, copy it to your project, and then import it into the page:
|
||||
|
||||
```html
|
||||
<script scr="simpleMindMap.umd.min.js"></script>
|
||||
```
|
||||
|
||||
A global variable `window.simpleMindMap` will be created.
|
||||
|
||||
The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
|
||||
|
||||
## Problems
|
||||
|
||||
### Error when using in Vite, indicating xml-js dependency error
|
||||
|
||||
@@ -1,7 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Start</h1>
|
||||
<h2>Installation</h2>
|
||||
<blockquote>
|
||||
<p>Things to note before version 0.2.0:</p>
|
||||
</blockquote>
|
||||
<pre class="hljs"><code>npm i simple-mind-map
|
||||
</code></pre>
|
||||
<p><code>0.2.0</code> Notes for previous versions:</p>
|
||||
<blockquote>
|
||||
<p>Note: This project is directly published in source code form and has not been
|
||||
packaged. If compilation fails, a Vue CLI-created project can add the
|
||||
following configuration to the vue.config.js file to allow babel-loader to
|
||||
compile this dependency:</p>
|
||||
<pre class="hljs"><code><span class="hljs-built_in">module</span>.exports = {
|
||||
<span class="hljs-attr">transpileDependencies</span>: [<span class="hljs-string">"simple-mind-map"</span>],
|
||||
};
|
||||
</code></pre>
|
||||
<p>Other projects should modify the packaging configuration as needed.</p>
|
||||
</blockquote>
|
||||
<h2>Usage</h2>
|
||||
<blockquote>
|
||||
<p>The <code>web</code> directory of this repository provides a complete project based on <code>Vue2</code>. If you encounter any doubts about using it, you can refer to the implementation of this project.</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>To learn about its use in other frameworks, you can refer to the following unofficial implementations:</p>
|
||||
<p>1.<a href="https://github.com/huangyuanyin/hyy-vue3-mindMap">https://github.com/huangyuanyin/hyy-vue3-mindMap</a>: A mind map based on Vue3.2+ElementPlus.</p>
|
||||
</blockquote>
|
||||
<p>Firstly, provide a container element with a width and height not equal to 0:</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mindMapContainer"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<p>Then introduce the <code>simple-mind-map</code> library and create an instance:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">"simple-mind-map"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'mindMapContainer'</span>),
|
||||
<span class="hljs-attr">data</span>: {
|
||||
<span class="hljs-string">"data"</span>: {
|
||||
<span class="hljs-string">"text"</span>: <span class="hljs-string">"Root Node"</span>
|
||||
},
|
||||
<span class="hljs-string">"children"</span>: []
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<p>This will result in a mind map.</p>
|
||||
<p>If you want to implement a complete mind map, you usually need to develop some UI interfaces to achieve more functions through the interfaces provided by the <code>simple-mind-map</code> library.</p>
|
||||
<p><code>simple-mind-map</code> supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.</p>
|
||||
<p>The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the <code>babel</code> compilation <code>simple mind-map</code> in your project to prevent some newer <code>js</code> syntax some browsers not supporting it.</p>
|
||||
<p>If you need a file in the format of <code>umd</code> module, such as <code>CDN</code> in the browser, Then you can find the <code>simpleMindMap.umd.min.js</code> file in the <code>/simple-mind-map/dist/</code> directory, copy it to your project, and then import it into the page:</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">"simpleMindMap.umd.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
<p>A global variable <code>window.simpleMindMap</code> will be created.</p>
|
||||
<p>The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.</p>
|
||||
<h2>Development</h2>
|
||||
<p>If you only use library, you don't need to read this section.</p>
|
||||
<h3>Local Development</h3>
|
||||
<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
|
||||
<span class="hljs-built_in">cd</span> simple-mind-map
|
||||
@@ -38,48 +90,6 @@ npm run buildDoc
|
||||
npm run build
|
||||
</code></pre>
|
||||
<p>The <code>index.html</code> file will be automatically moved to the root directory.</p>
|
||||
<h2>Installation</h2>
|
||||
<blockquote>
|
||||
<p>Things to note before version 0.2.0:</p>
|
||||
</blockquote>
|
||||
<pre class="hljs"><code>npm i simple-mind-map
|
||||
</code></pre>
|
||||
<p><code>0.2.0</code> Notes for previous versions:</p>
|
||||
<blockquote>
|
||||
<p>Note: This project is directly published in source code form and has not been
|
||||
packaged. If compilation fails, a Vue CLI-created project can add the
|
||||
following configuration to the vue.config.js file to allow babel-loader to
|
||||
compile this dependency:</p>
|
||||
<pre class="hljs"><code><span class="hljs-built_in">module</span>.exports = {
|
||||
<span class="hljs-attr">transpileDependencies</span>: [<span class="hljs-string">"simple-mind-map"</span>],
|
||||
};
|
||||
</code></pre>
|
||||
<p>Other projects should modify the packaging configuration as needed.</p>
|
||||
</blockquote>
|
||||
<h2>Usage</h2>
|
||||
<blockquote>
|
||||
<p>The <code>web</code> directory of this repository provides a complete project based on <code>Vue2</code>. If you encounter any doubts about using it, you can refer to the implementation of this project.</p>
|
||||
</blockquote>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mindMapContainer"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">"simple-mind-map"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'mindMapContainer'</span>),
|
||||
<span class="hljs-attr">data</span>: {
|
||||
<span class="hljs-string">"data"</span>: {
|
||||
<span class="hljs-string">"text"</span>: <span class="hljs-string">"Root Node"</span>
|
||||
},
|
||||
<span class="hljs-string">"children"</span>: []
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<p>The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the <code>babel</code> compilation <code>simple mind-map</code> in your project to prevent some newer <code>js</code> syntax some browsers not supporting it.</p>
|
||||
<p>If you need a file in the format of <code>umd</code> module, such as <code>CDN</code> in the browser, Then you can find the <code>simpleMindMap.umd.min.js</code> file in the <code>/simple-mind-map/dist/</code> directory, copy it to your project, and then import it into the page:</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">"simpleMindMap.umd.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
<p>A global variable <code>window.simpleMindMap</code> will be created.</p>
|
||||
<p>The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.</p>
|
||||
<h2>Problems</h2>
|
||||
<h3>Error when using in Vite, indicating xml-js dependency error</h3>
|
||||
<p>Solution: use the following import method:</p>
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
`simple-mind-map`是一个简单&强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。
|
||||
|
||||
> 如果你只是想使用思维导图，你也完全可以把本项目的demo作为一个普通的在线思维导图工具使用。点击右上角的【在线示例】开始使用吧。
|
||||
|
||||
## 特性
|
||||
|
||||
- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积
|
||||
@@ -68,4 +70,14 @@
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
|
||||
## 请作者喝杯咖啡
|
||||
|
||||
开源不易，如果本项目有帮助到你的话，可以请作者喝杯咖啡哟~
|
||||
|
||||
> 转账请备注【思维导图】。你的头像和名字将会出现在下面。
|
||||
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
@@ -2,21 +2,24 @@
|
||||
<div>
|
||||
<h1>简介</h1>
|
||||
<p><code>simple-mind-map</code>是一个简单&强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。</p>
|
||||
<blockquote>
|
||||
<p>如果你只是想使用思维导图，你也完全可以把本项目的demo作为一个普通的在线思维导图工具使用。点击右上角的【在线示例】开始使用吧。</p>
|
||||
</blockquote>
|
||||
<h2>特性</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox198" checked="true"><label for="checkbox198">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
|
||||
<li><input type="checkbox" id="checkbox199" checked="true"><label for="checkbox199">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
|
||||
<li><input type="checkbox" id="checkbox200" checked="true"><label for="checkbox200">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
|
||||
<li><input type="checkbox" id="checkbox201" checked="true"><label for="checkbox201">支持快捷键</label></li>
|
||||
<li><input type="checkbox" id="checkbox202" checked="true"><label for="checkbox202">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox203" checked="true"><label for="checkbox203">支持前进后退</label></li>
|
||||
<li><input type="checkbox" id="checkbox204" checked="true"><label for="checkbox204">支持拖动、缩放</label></li>
|
||||
<li><input type="checkbox" id="checkbox205" checked="true"><label for="checkbox205">支持右键和Ctrl+左键两种多选方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox206" checked="true"><label for="checkbox206">支持节点自由拖拽、拖拽调整</label></li>
|
||||
<li><input type="checkbox" id="checkbox207" checked="true"><label for="checkbox207">支持多种节点形状</label></li>
|
||||
<li><input type="checkbox" id="checkbox208" checked="true"><label for="checkbox208">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
|
||||
<li><input type="checkbox" id="checkbox209" checked="true"><label for="checkbox209">支持小地图、支持水印</label></li>
|
||||
<li><input type="checkbox" id="checkbox210" checked="true"><label for="checkbox210">支持关联线</label></li>
|
||||
<li><input type="checkbox" id="checkbox54" checked="true" /><label for="checkbox54">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
|
||||
<li><input type="checkbox" id="checkbox55" checked="true" /><label for="checkbox55">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
|
||||
<li><input type="checkbox" id="checkbox56" checked="true" /><label for="checkbox56">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
|
||||
<li><input type="checkbox" id="checkbox57" checked="true" /><label for="checkbox57">支持快捷键</label></li>
|
||||
<li><input type="checkbox" id="checkbox58" checked="true" /><label for="checkbox58">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox59" checked="true" /><label for="checkbox59">支持前进后退</label></li>
|
||||
<li><input type="checkbox" id="checkbox60" checked="true" /><label for="checkbox60">支持拖动、缩放</label></li>
|
||||
<li><input type="checkbox" id="checkbox61" checked="true" /><label for="checkbox61">支持右键和Ctrl+左键两种多选方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox62" checked="true" /><label for="checkbox62">支持节点自由拖拽、拖拽调整</label></li>
|
||||
<li><input type="checkbox" id="checkbox63" checked="true" /><label for="checkbox63">支持多种节点形状</label></li>
|
||||
<li><input type="checkbox" id="checkbox64" checked="true" /><label for="checkbox64">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
|
||||
<li><input type="checkbox" id="checkbox65" checked="true" /><label for="checkbox65">支持小地图、支持水印</label></li>
|
||||
<li><input type="checkbox" id="checkbox66" checked="true" /><label for="checkbox66">支持关联线</label></li>
|
||||
</ul>
|
||||
<h2>仓库目录介绍</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
@@ -24,11 +27,11 @@
|
||||
<p>2.<code>web</code></p>
|
||||
<p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox211" checked="true"><label for="checkbox211">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox212" checked="true"><label for="checkbox212">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
|
||||
<li><input type="checkbox" id="checkbox213" checked="true"><label for="checkbox213">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
|
||||
<li><input type="checkbox" id="checkbox214" checked="true"><label for="checkbox214">右键菜单，支持展开、收起、整理布局等操作</label></li>
|
||||
<li><input type="checkbox" id="checkbox215" checked="true"><label for="checkbox215">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
|
||||
<li><input type="checkbox" id="checkbox67" checked="true" /><label for="checkbox67">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox68" checked="true" /><label for="checkbox68">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
|
||||
<li><input type="checkbox" id="checkbox69" checked="true" /><label for="checkbox69">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
|
||||
<li><input type="checkbox" id="checkbox70" checked="true" /><label for="checkbox70">右键菜单，支持展开、收起、整理布局等操作</label></li>
|
||||
<li><input type="checkbox" id="checkbox71" checked="true" /><label for="checkbox71">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
|
||||
</ul>
|
||||
<p>提供文档页面服务。</p>
|
||||
<p>3.<code>dist</code></p>
|
||||
@@ -48,7 +51,13 @@
|
||||
<p>尊重版权，主题和图标请勿直接用于商业项目。</p>
|
||||
<h2>License</h2>
|
||||
<p><a href="https://opensource.org/licenses/MIT">MIT</a></p>
|
||||
|
||||
<h2>请作者喝杯咖啡</h2>
|
||||
<p>开源不易，如果本项目有帮助到你的话，可以请作者喝杯咖啡哟~</p>
|
||||
<blockquote>
|
||||
<p>转账请备注【思维导图】。你的头像和名字将会出现在下面。</p>
|
||||
</blockquote>
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,7 +1,75 @@
|
||||
# 开始
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
npm i simple-mind-map
|
||||
```
|
||||
|
||||
`0.2.0`版本之前的注意事项：
|
||||
|
||||
> 注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
|
||||
>
|
||||
> ```js
|
||||
> module.exports = {
|
||||
> transpileDependencies: ['simple-mind-map']
|
||||
> }
|
||||
> ```
|
||||
>
|
||||
> 其他项目请自行修改打包配置。
|
||||
|
||||
## 使用
|
||||
|
||||
> 本仓库的`web`目录提供了一个基于`Vue2`的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。
|
||||
|
||||
> 想要了解在其他框架中的使用，你可以参考以下这些非官方的实现：
|
||||
>
|
||||
> 1.[https://github.com/huangyuanyin/hyy-vue3-mindMap](https://github.com/huangyuanyin/hyy-vue3-mindMap)：一个基于 Vue3.2 +ElementPlus的思维导图。
|
||||
|
||||
首先提供一个宽高不为0的容器元素：
|
||||
|
||||
```html
|
||||
<div id="mindMapContainer"></div>
|
||||
```
|
||||
|
||||
然后引入`simple-mind-map`库，创建一个实例：
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map";
|
||||
|
||||
const mindMap = new MindMap({
|
||||
el: document.getElementById('mindMapContainer'),
|
||||
data: {
|
||||
"data": {
|
||||
"text": "根节点"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
这样即可得一个思维导图。
|
||||
|
||||
如果你想要实现一个完整思维导图，那么通常你需要开发一些ui界面，通过`simple-mind-map`库提供的接口来实现更多功能。
|
||||
|
||||
`simple-mind-map`支持丰富的配置、事件、命令，以及一些额外的插件扩展，阅读后续的文档来了解更多吧。
|
||||
|
||||
默认引入的是未打包的`ES`模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置`babel`编译`simple-mind-map`，防止一些较新的`js`语法部分浏览器不支持。
|
||||
|
||||
如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件，复制到你的项目中，然后在页面中引入：
|
||||
|
||||
```html
|
||||
<script scr="simpleMindMap.umd.min.js"></script>
|
||||
```
|
||||
|
||||
会创建一个全局变量`window.simpleMindMap`。
|
||||
|
||||
这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
|
||||
|
||||
## 开发
|
||||
|
||||
如果你只是使用库的话可以不用阅读此小节。
|
||||
|
||||
### 本地开发
|
||||
|
||||
```bash
|
||||
@@ -52,58 +120,6 @@ npm run build
|
||||
|
||||
会自动把`index.html`移动到根目录。
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
npm i simple-mind-map
|
||||
```
|
||||
|
||||
`0.2.0`版本之前的注意事项：
|
||||
|
||||
> 注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
|
||||
>
|
||||
> ```js
|
||||
> module.exports = {
|
||||
> transpileDependencies: ['simple-mind-map']
|
||||
> }
|
||||
> ```
|
||||
>
|
||||
> 其他项目请自行修改打包配置。
|
||||
|
||||
## 使用
|
||||
|
||||
> 本仓库的`web`目录提供了一个基于`Vue2`的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。
|
||||
|
||||
```html
|
||||
<div id="mindMapContainer"></div>
|
||||
```
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map";
|
||||
|
||||
const mindMap = new MindMap({
|
||||
el: document.getElementById('mindMapContainer'),
|
||||
data: {
|
||||
"data": {
|
||||
"text": "根节点"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
默认引入的是未打包的`ES`模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置`babel`编译`simple-mind-map`，防止一些较新的`js`语法部分浏览器不支持。
|
||||
|
||||
如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件，复制到你的项目中，然后在页面中引入：
|
||||
|
||||
```html
|
||||
<script scr="simpleMindMap.umd.min.js"></script>
|
||||
```
|
||||
|
||||
会创建一个全局变量`window.simpleMindMap`。
|
||||
|
||||
这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
|
||||
|
||||
## 问题
|
||||
|
||||
### 1.在Vite中使用报错，提示xml-js依赖出错
|
||||
|
||||
@@ -1,7 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>开始</h1>
|
||||
<h2>安装</h2>
|
||||
<pre class="hljs"><code>npm i simple-mind-map
|
||||
</code></pre>
|
||||
<p><code>0.2.0</code>版本之前的注意事项：</p>
|
||||
<blockquote>
|
||||
<p>注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：</p>
|
||||
<pre class="hljs"><code><span class="hljs-built_in">module</span>.exports = {
|
||||
<span class="hljs-attr">transpileDependencies</span>: [<span class="hljs-string">'simple-mind-map'</span>]
|
||||
}
|
||||
</code></pre>
|
||||
<p>其他项目请自行修改打包配置。</p>
|
||||
</blockquote>
|
||||
<h2>使用</h2>
|
||||
<blockquote>
|
||||
<p>本仓库的<code>web</code>目录提供了一个基于<code>Vue2</code>的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>想要了解在其他框架中的使用，你可以参考以下这些非官方的实现：</p>
|
||||
<p>1.<a href="https://github.com/huangyuanyin/hyy-vue3-mindMap">https://github.com/huangyuanyin/hyy-vue3-mindMap</a>：一个基于 Vue3.2 +ElementPlus的思维导图。</p>
|
||||
</blockquote>
|
||||
<p>首先提供一个宽高不为0的容器元素：</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mindMapContainer"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<p>然后引入<code>simple-mind-map</code>库，创建一个实例：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">"simple-mind-map"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'mindMapContainer'</span>),
|
||||
<span class="hljs-attr">data</span>: {
|
||||
<span class="hljs-string">"data"</span>: {
|
||||
<span class="hljs-string">"text"</span>: <span class="hljs-string">"根节点"</span>
|
||||
},
|
||||
<span class="hljs-string">"children"</span>: []
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<p>这样即可得一个思维导图。</p>
|
||||
<p>如果你想要实现一个完整思维导图，那么通常你需要开发一些ui界面，通过<code>simple-mind-map</code>库提供的接口来实现更多功能。</p>
|
||||
<p><code>simple-mind-map</code>支持丰富的配置、事件、命令，以及一些额外的插件扩展，阅读后续的文档来了解更多吧。</p>
|
||||
<p>默认引入的是未打包的<code>ES</code>模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置<code>babel</code>编译<code>simple-mind-map</code>，防止一些较新的<code>js</code>语法部分浏览器不支持。</p>
|
||||
<p>如果你需要<code>umd</code>模块格式的文件，比如以<code>CDN</code>的方式在浏览器上使用，那么你可以从<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.umd.min.js</code>文件，复制到你的项目中，然后在页面中引入：</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">"simpleMindMap.umd.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
<p>会创建一个全局变量<code>window.simpleMindMap</code>。</p>
|
||||
<p>这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。</p>
|
||||
<h2>开发</h2>
|
||||
<p>如果你只是使用库的话可以不用阅读此小节。</p>
|
||||
<h3>本地开发</h3>
|
||||
<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
|
||||
<span class="hljs-built_in">cd</span> simple-mind-map
|
||||
@@ -34,42 +80,6 @@ npm run buildDoc
|
||||
npm run build
|
||||
</code></pre>
|
||||
<p>会自动把<code>index.html</code>移动到根目录。</p>
|
||||
<h2>安装</h2>
|
||||
<pre class="hljs"><code>npm i simple-mind-map
|
||||
</code></pre>
|
||||
<p><code>0.2.0</code>版本之前的注意事项：</p>
|
||||
<blockquote>
|
||||
<p>注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：</p>
|
||||
<pre class="hljs"><code><span class="hljs-built_in">module</span>.exports = {
|
||||
<span class="hljs-attr">transpileDependencies</span>: [<span class="hljs-string">'simple-mind-map'</span>]
|
||||
}
|
||||
</code></pre>
|
||||
<p>其他项目请自行修改打包配置。</p>
|
||||
</blockquote>
|
||||
<h2>使用</h2>
|
||||
<blockquote>
|
||||
<p>本仓库的<code>web</code>目录提供了一个基于<code>Vue2</code>的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。</p>
|
||||
</blockquote>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mindMapContainer"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">"simple-mind-map"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'mindMapContainer'</span>),
|
||||
<span class="hljs-attr">data</span>: {
|
||||
<span class="hljs-string">"data"</span>: {
|
||||
<span class="hljs-string">"text"</span>: <span class="hljs-string">"根节点"</span>
|
||||
},
|
||||
<span class="hljs-string">"children"</span>: []
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<p>默认引入的是未打包的<code>ES</code>模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置<code>babel</code>编译<code>simple-mind-map</code>，防止一些较新的<code>js</code>语法部分浏览器不支持。</p>
|
||||
<p>如果你需要<code>umd</code>模块格式的文件，比如以<code>CDN</code>的方式在浏览器上使用，那么你可以从<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.umd.min.js</code>文件，复制到你的项目中，然后在页面中引入：</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">"simpleMindMap.umd.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
<p>会创建一个全局变量<code>window.simpleMindMap</code>。</p>
|
||||
<p>这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。</p>
|
||||
<h2>问题</h2>
|
||||
<h3>1.在Vite中使用报错，提示xml-js依赖出错</h3>
|
||||
<p>解决方法：使用如下引入方式：</p>
|
||||
|
||||
Reference in New Issue
Block a user