去除docs目录，更新群二维码

打包0.4.2
Fetaure：Node类的setText方法增加第二个参数，以支持设置富文本内容
2026-02-18 06:18:27 +08:00 · 2023-03-06 14:26:02 +08:00 · 2023-03-01 09:24:51 +08:00 · 2023-03-01 09:17:45 +08:00 · 2023-02-27 15:31:52 +08:00 · 2023-02-27 15:19:56 +08:00
181 changed files with 14884 additions and 6933 deletions
--- a/README.md
+++ b/README.md
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
--- a/docs/assets/1.gif
+++ b/docs/assets/1.gif
--- a/docs/assets/2.gif
+++ b/docs/assets/2.gif
--- a/docs/assets/2021-07-21-19-54-48.gif
+++ b/docs/assets/2021-07-21-19-54-48.gif
--- a/docs/assets/3.gif
+++ b/docs/assets/3.gif
--- a/docs/assets/image-20210717174716810.png
+++ b/docs/assets/image-20210717174716810.png
--- a/docs/assets/image-20210717202607786.png
+++ b/docs/assets/image-20210717202607786.png
--- a/docs/assets/image-20210717210355763.png
+++ b/docs/assets/image-20210717210355763.png
--- a/docs/assets/image-20210717224527681.png
+++ b/docs/assets/image-20210717224527681.png
--- a/docs/assets/image-20210717230604086.png
+++ b/docs/assets/image-20210717230604086.png
--- a/docs/assets/image-20210717230805200.png
+++ b/docs/assets/image-20210717230805200.png
--- a/docs/assets/image-20210717230808662.png
+++ b/docs/assets/image-20210717230808662.png
--- a/docs/assets/image-20210718083006111.png
+++ b/docs/assets/image-20210718083006111.png
--- a/docs/assets/image-20210718083616076.png
+++ b/docs/assets/image-20210718083616076.png
--- a/docs/assets/image-20210718092817830.png
+++ b/docs/assets/image-20210718092817830.png
--- a/docs/assets/image-20210718102434530.png
+++ b/docs/assets/image-20210718102434530.png
--- a/docs/assets/image-20210718110652705.png
+++ b/docs/assets/image-20210718110652705.png
--- a/docs/assets/image-20210718111334085.png
+++ b/docs/assets/image-20210718111334085.png
--- a/docs/assets/image-20210718134525691.png
+++ b/docs/assets/image-20210718134525691.png
--- a/docs/assets/image-20210718184835414.png
+++ b/docs/assets/image-20210718184835414.png
--- a/docs/assets/image-20210718191124627.png
+++ b/docs/assets/image-20210718191124627.png
--- a/docs/assets/image-20210718221814590.png
+++ b/docs/assets/image-20210718221814590.png
--- a/docs/assets/image-20210718222150055.png
+++ b/docs/assets/image-20210718222150055.png
--- a/docs/assets/image-20210718222612078.png
+++ b/docs/assets/image-20210718222612078.png
--- a/docs/assets/image-20210720191943989.png
+++ b/docs/assets/image-20210720191943989.png
--- a/docs/assets/image-20210720192008277.png
+++ b/docs/assets/image-20210720192008277.png
--- a/docs/assets/image-20210720200816281.png
+++ b/docs/assets/image-20210720200816281.png
--- a/docs/assets/image-20210721183307656.png
+++ b/docs/assets/image-20210721183307656.png
--- a/docs/assets/image-20210721183340310.png
+++ b/docs/assets/image-20210721183340310.png
--- a/docs/assets/image-20210721183823754.png
+++ b/docs/assets/image-20210721183823754.png
--- a/docs/assets/image-20210721184140488.png
+++ b/docs/assets/image-20210721184140488.png
--- a/docs/assets/image-20210721185453825.png
+++ b/docs/assets/image-20210721185453825.png
--- a/docs/assets/image-20210721190700979.png
+++ b/docs/assets/image-20210721190700979.png
--- a/docs/assets/swdt.jpg
+++ b/docs/assets/swdt.jpg
--- a/docs/web思维导图实现的技术点分析.md
+++ b/docs/web思维导图实现的技术点分析.md
--- a/index.html
+++ b/index.html
@@ -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"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.3d234c87.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.94891485.css" rel="preload" as="style"><link href="dist/js/app.54d858bc.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.6cac1a4d.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.94891485.css" rel="stylesheet"><link href="dist/css/app.3d234c87.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.6cac1a4d.js"></script><script src="dist/js/app.54d858bc.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-2d0a3179.05d77cdf.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.61258a02.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.040c6f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.87f48f42.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.ae972b36.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.c9a9ab22.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.e44018ef.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.17d4f60a.js" rel="prefetch"><link href="dist/js/chunk-2d0c18d8.e63d640f.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.2803233f.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.77611624.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.57f5b62e.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.b85d4ce6.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.6c0d2c1e.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.757badee.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.32d1bf7e.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.836132f8.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.7b4a470a.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.00dad103.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.8750dc1f.js" rel="prefetch"><link href="dist/js/chunk-2d0e268c.4f35fbc4.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.2fbc58fd.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.c7c6517f.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.1bf9ef3b.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.4cf834ac.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.e60ccf9b.js" rel="prefetch"><link href="dist/js/chunk-2d216004.fde7548f.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.1447b6d2.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.0d8e49a1.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.3ef2e8d7.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.524ee6e1.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.0d8e49a1.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.524ee6e1.js"></script><script src="dist/js/app.3ef2e8d7.js"></script></body></html>
--- a/qrcode.jpg
+++ b/qrcode.jpg
--- a/simple-mind-map/example/exampleData.js
+++ b/simple-mind-map/example/exampleData.js
@@ -900,6 +900,17 @@ const data5 = {
    }
 }

+// 富文本数据v0.4.0+，需要使用RichText插件才支持富文本编辑
+const richTextData = {
+    "root": {
+        "data": {
+            "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
+            "richText": true
+        },
+        "children": []
+    }
+}
+
 const rootData = {
    "root": {
        "data": {
@@ -925,5 +936,6 @@ export default {
    "layout": "logicalStructure",
    // "layout": "mindMap",
    // "layout": "catalogOrganization"
-    // "layout": "organizationStructure"
+    // "layout": "organizationStructure",
+    "config": {}
 }
--- a/simple-mind-map/example/exportFullData.json
+++ b/simple-mind-map/example/exportFullData.json
@@ -31,6 +31,12 @@
                    "isActive": false
                },
                "children": []
+            }, {
+                "data": {
+                    "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
+                    "richText": true
+                },
+                "children": []
            }]
        }]
    },
@@ -62,5 +68,6 @@
            "sx": 0,
            "sy": 0
        }
-    }
+    },
+    "config": {}
 }
--- a/simple-mind-map/full.js
+++ b/simple-mind-map/full.js
@@ -0,0 +1,20 @@
+import MindMap from './index'
+import MiniMap from './src/MiniMap.js'
+import Watermark from './src/Watermark.js'
+import KeyboardNavigation from './src/KeyboardNavigation.js'
+import Export from './src/Export.js'
+import Drag from './src/Drag.js'
+import Select from './src/Select.js'
+import xmind from './src/parse/xmind.js'
+
+MindMap.xmind = xmind
+
+MindMap
+  .usePlugin(MiniMap)
+  .usePlugin(Watermark)
+  .usePlugin(Drag)
+  .usePlugin(KeyboardNavigation)
+  .usePlugin(Export)
+  .usePlugin(Select)
+
+export default MindMap
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -7,15 +7,9 @@ import Style from './src/Style'
 import KeyCommand from './src/KeyCommand'
 import Command from './src/Command'
 import BatchExecution from './src/BatchExecution'
-import Export from './src/Export'
-import Select from './src/Select'
-import Drag from './src/Drag'
-import MiniMap from './src/MiniMap'
 import { layoutValueList } from './src/utils/constant'
 import { SVG } from '@svgdotjs/svg.js'
-import xmind from './src/parse/xmind'
 import { simpleDeepClone } from './src/utils'
-import KeyboardNavigation from './src/KeyboardNavigation'
 import defaultTheme from './src/themes/default'

 // 默认选项配置
@@ -45,13 +39,29 @@ const defaultOpt = {
  // 多选节点时鼠标移动距边缘多少距离时开始偏移
  selectTranslateLimit: 20,
  // 自定义节点备注内容显示
-  customNoteContentShow: null
+  customNoteContentShow: null,
  /*
        {
            show(){},
            hide(){}
        }
    */
+  // 是否开启节点自由拖拽
+  enableFreeDrag: false,
+  // 水印配置
+  watermarkConfig: {
+    text: '',
+    lineSpacing: 100,
+    textSpacing: 100,
+    angle: 30,
+    textStyle: {
+      color: '#999',
+      opacity: 0.5,
+      fontSize: 14
+    }
+  },
+  // 达到该宽度文本自动换行
+  textAutoWrapWidth: 500
 }

 //  思维导图
@@ -105,34 +115,14 @@ class MindMap {
      draw: this.draw
    })

-    // 小地图类
-    this.miniMap = new MiniMap({
-      mindMap: this
-    })
-
-    // 导出类
-    this.doExport = new Export({
-      mindMap: this
-    })
-
-    // 选择类
-    this.select = new Select({
-      mindMap: this
-    })
-
-    // 拖动类
-    this.drag = new Drag({
-      mindMap: this
-    })
-
-    // 键盘导航类
-    this.keyboardNavigation = new KeyboardNavigation({
-      mindMap: this
-    })
-
    // 批量执行类
    this.batchExecution = new BatchExecution()

+    // 注册插件
+    MindMap.pluginList.forEach((plugin) => {
+      this.initPlugin(plugin)
+    })
+
    // 初始渲染
    this.reRender()
    setTimeout(() => {
@@ -152,21 +142,21 @@ class MindMap {
  }

  //  渲染，部分渲染
-  render() {
+  render(callback) {
    this.batchExecution.push('render', () => {
      this.initTheme()
      this.renderer.reRender = false
-      this.renderer.render()
+      this.renderer.render(callback)
    })
  }

  //  重新渲染
-  reRender() {
+  reRender(callback) {
    this.batchExecution.push('render', () => {
      this.draw.clear()
      this.initTheme()
      this.renderer.reRender = true
-      this.renderer.render()
+      this.renderer.render(callback)
    })
  }

@@ -229,6 +219,16 @@ class MindMap {
    return prop === undefined ? this.themeConfig : this.themeConfig[prop]
  }

+  // 获取配置
+  getConfig(prop) {
+    return prop === undefined ? this.opt : this.opt[prop]
+  }
+
+  // 更新配置
+  updateConfig(opt = {}) {
+    this.opt = this.handleOpt(merge.all([defaultOpt, this.opt, opt]))
+  }
+
  //  获取当前布局结构
  getLayout() {
    return this.opt.layout
@@ -325,9 +325,98 @@ class MindMap {
    }
    this.emit('mode_change', mode)
  }
+
+  // 获取svg数据
+  getSvgData() {
+    const svg = this.svg
+    const draw = this.draw
+    // 保存原始信息
+    const origWidth = svg.width()
+    const origHeight = svg.height()
+    const origTransform = draw.transform()
+    const elRect = this.el.getBoundingClientRect()
+    // 去除放大缩小的变换效果
+    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
+    // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
+    const rect = draw.rbox()
+    // 将svg设置为实际内容的宽高
+    svg.size(rect.width, rect.height)
+    // 把实际内容变换
+    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
+    // 克隆一份数据
+    let clone = svg.clone()
+    // 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
+    if ((rect.width > origWidth || rect.height >  origHeight) && this.watermark && this.watermark.hasWatermark()) {
+      this.width = rect.width
+      this.height = rect.height
+      this.watermark.draw()
+      clone = svg.clone()
+      this.width = origWidth
+      this.height = origHeight
+      this.watermark.draw()
+    }
+    // 恢复原先的大小和变换信息
+    svg.size(origWidth, origHeight)
+    draw.transform(origTransform)
+
+    return {
+      svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
+      svgHTML: clone.svg(), // svg字符串
+      rect: {
+        ...rect, // 思维导图图形未缩放时的位置尺寸等信息
+        ratio: rect.width / rect.height // 思维导图图形的宽高比
+      },
+      origWidth, // 画布宽度
+      origHeight, // 画布高度
+      scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
+      scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
+    }
+  }
+
+  // 添加插件
+  addPlugin(plugin, opt) {
+    let index = MindMap.hasPlugin(plugin)
+    if (index === -1) {
+      MindMap.usePlugin(plugin, opt)
+      this.initPlugin(plugin)
+    }
+  }
+
+  // 移除插件
+  removePlugin(plugin) {
+    let index = MindMap.hasPlugin(plugin)
+    if (index !== -1) {
+      MindMap.pluginList.splice(index, 1)
+      if (this[plugin.instanceName]) {
+        if (this[plugin.instanceName].beforePluginRemove) {
+          this[plugin.instanceName].beforePluginRemove()
+        }
+        delete this[plugin.instanceName]
+      }
+    }
+  }
+
+  // 实例化插件
+  initPlugin(plugin) {
+    this[plugin.instanceName] = new plugin({
+      mindMap: this,
+      pluginOpt: plugin.pluginOpt
+    })
+  }
 }

-MindMap.xmind = xmind
+// 插件列表
+MindMap.pluginList = []
+MindMap.usePlugin = (plugin, opt = {}) => {
+  plugin.pluginOpt = opt
+  MindMap.pluginList.push(plugin)
+  return MindMap
+}
+MindMap.hasPlugin = (plugin) => {
+  return MindMap.pluginList.findIndex((item) => {
+    return item === plugin
+  })
+}

 // 定义新主题
 MindMap.defineTheme = (name, config = {}) => {
--- a/simple-mind-map/package-lock.json
+++ b/simple-mind-map/package-lock.json
@@ -1,19 +1,21 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.21",
+  "version": "0.4.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
-      "version": "0.2.21",
+      "version": "0.4.0",
      "license": "MIT",
      "dependencies": {
        "@svgdotjs/svg.js": "^3.0.16",
        "canvg": "^3.0.7",
        "deepmerge": "^1.5.2",
        "eventemitter3": "^4.0.7",
+        "html2canvas": "^1.4.1",
        "jspdf": "^2.5.1",
        "jszip": "^3.10.1",
+        "quill": "^1.3.6",
        "xml-js": "^1.6.11"
      },
      "devDependencies": {
@@ -225,7 +227,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
-      "optional": true,
      "engines": {
        "node": ">= 0.6.0"
      }
@@ -251,6 +252,18 @@
        "node": ">= 0.4.0"
      }
    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -294,6 +307,14 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -351,7 +372,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
-      "optional": true,
      "dependencies": {
        "utrie": "^1.0.2"
      }
@@ -373,6 +393,22 @@
        }
      }
    },
+    "node_modules/deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "dependencies": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -387,6 +423,21 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/define-properties": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "dependencies": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/doctrine": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -586,12 +637,22 @@
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "dev": true
    },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
    "node_modules/fast-json-stable-stringify": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -671,6 +732,32 @@
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
      "dev": true
    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -724,6 +811,17 @@
      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
      "dev": true
    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
    "node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -733,11 +831,46 @@
        "node": ">=8"
      }
    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/html2canvas": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
-      "optional": true,
      "dependencies": {
        "css-line-break": "^2.1.0",
        "text-segmentation": "^1.0.3"
@@ -800,6 +933,35 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -830,6 +992,21 @@
        "node": ">=8"
      }
    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -969,6 +1146,29 @@
      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
      "dev": true
    },
+    "node_modules/object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1030,6 +1230,11 @@
      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
    },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -1132,6 +1337,37 @@
        }
      ]
    },
+    "node_modules/quill": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.6.tgz",
+      "integrity": "sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug==",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.1",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/quill/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+    },
    "node_modules/raf": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -1159,6 +1395,22 @@
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/regexpp": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -1336,7 +1588,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
-      "optional": true,
      "dependencies": {
        "utrie": "^1.0.2"
      }
@@ -1389,7 +1640,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
-      "optional": true,
      "dependencies": {
        "base64-arraybuffer": "^1.0.2"
      }
@@ -1593,8 +1843,7 @@
    "base64-arraybuffer": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
-      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
-      "optional": true
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
    },
    "brace-expansion": {
      "version": "1.1.11",
@@ -1611,6 +1860,15 @@
      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
    "callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1642,6 +1900,11 @@
        "supports-color": "^7.1.0"
      }
    },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+    },
    "color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1688,7 +1951,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
-      "optional": true,
      "requires": {
        "utrie": "^1.0.2"
      }
@@ -1702,6 +1964,19 @@
        "ms": "2.1.2"
      }
    },
+    "deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "requires": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      }
+    },
    "deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1713,6 +1988,15 @@
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
    },
+    "define-properties": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "requires": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
    "doctrine": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1860,12 +2144,22 @@
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
    "fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "dev": true
    },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
    "fast-json-stable-stringify": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -1933,6 +2227,26 @@
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
      "dev": true
    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+    },
+    "get-intrinsic": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3"
+      }
+    },
    "glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -1971,17 +2285,45 @@
      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
      "dev": true
    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
    "has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
      "dev": true
    },
+    "has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "requires": {
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
    "html2canvas": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
-      "optional": true,
      "requires": {
        "css-line-break": "^2.1.0",
        "text-segmentation": "^1.0.3"
@@ -2029,6 +2371,23 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
+    "is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
    "is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2050,6 +2409,15 @@
      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
      "dev": true
    },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
    "isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -2168,6 +2536,20 @@
      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
      "dev": true
    },
+    "object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+    },
    "once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2214,6 +2596,11 @@
      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
    },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
    "parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2275,6 +2662,36 @@
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
      "dev": true
    },
+    "quill": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.6.tgz",
+      "integrity": "sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug==",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.1",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
    "raf": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -2302,6 +2719,16 @@
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
    },
+    "regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      }
+    },
    "regexpp": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -2419,7 +2846,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
-      "optional": true,
      "requires": {
        "utrie": "^1.0.2"
      }
@@ -2463,7 +2889,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
-      "optional": true,
      "requires": {
        "base64-arraybuffer": "^1.0.2"
      }
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.23",
+  "version": "0.4.2",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
@@ -22,14 +22,16 @@
    "format": "prettier --write ."
  },
  "module": "index.js",
-  "main": "./dist/simpleMindMap.umd.min.js",
+  "__main": "./dist/simpleMindMap.umd.min.js",
  "dependencies": {
    "@svgdotjs/svg.js": "^3.0.16",
    "canvg": "^3.0.7",
    "deepmerge": "^1.5.2",
    "eventemitter3": "^4.0.7",
+    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
    "jszip": "^3.10.1",
+    "quill": "^1.3.6",
    "xml-js": "^1.6.11"
  },
  "keywords": [
--- a/simple-mind-map/scripts/changeComments.js
+++ b/simple-mind-map/scripts/changeComments.js
@@ -1,4 +1,4 @@
-// 将/** */类型的注释转换为//类型
+// 遍历所有js文件
 const path = require('path')
 const fs = require('fs')

@@ -11,13 +11,26 @@ const transform = dir => {
    if (fs.statSync(file).isDirectory()) {
      transform(file)
    } else if (/\.js$/.test(file)) {
-      rewriteComments(file)
+      transformFile(file)
    }
  })
 }

-const rewriteComments = file => {
+const transformFile = file => {
+  console.log(file);
  let content = fs.readFileSync(file, 'utf-8')
+  countCodeLines(content)
+  // transformComments(file, content)
+}
+
+// 统计代码行数
+let totalLines = 0
+const countCodeLines = (content) => {
+  totalLines += content.split(/\n/).length
+}
+
+// 转换注释类型
+const transformComments = (file, content) => {
  console.log('当前转换文件：', file)
  content = content.replace(/\/\*\*[^/]+\*\//g, str => {
    let res = /@Desc:([^\n]+)\n/g.exec(str)
@@ -29,4 +42,5 @@ const rewriteComments = file => {
 }

 transform(entryPath)
-rewriteComments(path.join(__dirname, '../index.js'))
+transformFile(path.join(__dirname, '../index.js'))
+console.log(totalLines);
--- a/simple-mind-map/src/Command.js
+++ b/simple-mind-map/src/Command.js
@@ -72,6 +72,9 @@ class Command {

  //  添加回退数据
  addHistory() {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
    let data = this.getCopyData()
    this.history.push(simpleDeepClone(data))
    this.activeHistoryIndex = this.history.length - 1
@@ -85,6 +88,9 @@ class Command {

  //  回退
  back(step = 1) {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
    if (this.activeHistoryIndex - step >= 0) {
      this.activeHistoryIndex -= step
      this.mindMap.emit(
@@ -98,6 +104,9 @@ class Command {

  //  前进
  forward(step = 1) {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
    let len = this.history.length
    if (this.activeHistoryIndex + step <= len - 1) {
      this.activeHistoryIndex += step
--- a/simple-mind-map/src/Drag.js
+++ b/simple-mind-map/src/Drag.js
@@ -1,254 +1,265 @@
-import { bfsWalk, throttle } from './utils'
-import Base from './layouts/Base'
-
-//  节点拖动类
-
-class Drag extends Base {
-  //  构造函数
-
-  constructor({ mindMap }) {
-    super(mindMap.renderer)
-    this.mindMap = mindMap
-    this.reset()
-    this.bindEvent()
-  }
-
-  //  复位
-
-  reset() {
-    // 当前拖拽节点
-    this.node = null
-    // 当前重叠节点
-    this.overlapNode = null
-    // 当前上一个同级节点
-    this.prevNode = null
-    // 当前下一个同级节点
-    this.nextNode = null
-    // 画布的变换数据
-    this.drawTransform = null
-    // 克隆节点
-    this.clone = null
-    // 连接线
-    this.line = null
-    // 同级位置占位符
-    this.placeholder = null
-    // 鼠标按下位置和节点左上角的偏移量
-    this.offsetX = 0
-    this.offsetY = 0
-    // 克隆节点左上角的坐标
-    this.cloneNodeLeft = 0
-    this.cloneNodeTop = 0
-    // 当前鼠标是否按下
-    this.isMousedown = false
-    // 拖拽的鼠标位置变量
-    this.mouseDownX = 0
-    this.mouseDownY = 0
-    this.mouseMoveX = 0
-    this.mouseMoveY = 0
-  }
-
-  //  绑定事件
-
-  bindEvent() {
-    this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
-    this.mindMap.on('node_mousedown', (node, e) => {
-      if (this.mindMap.opt.readonly || node.isGeneralization) {
-        return
-      }
-      if (e.which !== 1 || node.isRoot) {
-        return
-      }
-      e.preventDefault()
-      // 计算鼠标按下的位置距离节点左上角的距离
-      this.drawTransform = this.mindMap.draw.transform()
-      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-      this.offsetX = x - (node.left * scaleX + translateX)
-      this.offsetY = y - (node.top * scaleY + translateY)
-      this.node = node
-      this.isMousedown = true
-      this.mouseDownX = x
-      this.mouseDownY = y
-    })
-    this.mindMap.on('mousemove', e => {
-      if (this.mindMap.opt.readonly) {
-        return
-      }
-      if (!this.isMousedown) {
-        return
-      }
-      e.preventDefault()
-      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-      this.mouseMoveX = x
-      this.mouseMoveY = y
-      if (
-        Math.abs(x - this.mouseDownX) <= 10 &&
-        Math.abs(y - this.mouseDownY) <= 10 &&
-        !this.node.isDrag
-      ) {
-        return
-      }
-      this.mindMap.renderer.clearAllActive()
-      this.onMove(x, y)
-    })
-    this.onMouseup = this.onMouseup.bind(this)
-    this.mindMap.on('node_mouseup', this.onMouseup)
-    this.mindMap.on('mouseup', this.onMouseup)
-  }
-
-  //  鼠标松开事件
-
-  onMouseup(e) {
-    if (!this.isMousedown) {
-      return
-    }
-    this.isMousedown = false
-    let _nodeIsDrag = this.node.isDrag
-    this.node.isDrag = false
-    this.node.show()
-    this.removeCloneNode()
-    // 存在重叠子节点，则移动作为其子节点
-    if (this.overlapNode) {
-      this.mindMap.renderer.setNodeActive(this.overlapNode, false)
-      this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode)
-    } else if (this.prevNode) {
-      // 存在前一个相邻节点，作为其下一个兄弟节点
-      this.mindMap.renderer.setNodeActive(this.prevNode, false)
-      this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode)
-    } else if (this.nextNode) {
-      // 存在下一个相邻节点，作为其前一个兄弟节点
-      this.mindMap.renderer.setNodeActive(this.nextNode, false)
-      this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
-    } else if (_nodeIsDrag) {
-      // 自定义位置
-      let { x, y } = this.mindMap.toPos(
-        e.clientX - this.offsetX,
-        e.clientY - this.offsetY
-      )
-      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-      x = (x - translateX) / scaleX
-      y = (y - translateY) / scaleY
-      this.node.left = x
-      this.node.top = y
-      this.node.customLeft = x
-      this.node.customTop = y
-      this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y)
-      this.mindMap.render()
-    }
-    this.reset()
-  }
-
-  //  创建克隆节点
-
-  createCloneNode() {
-    if (!this.clone) {
-      // 节点
-      this.clone = this.node.group.clone()
-      this.clone.opacity(0.5)
-      this.clone.css('z-index', 99999)
-      this.node.isDrag = true
-      this.node.hide()
-      // 连接线
-      this.line = this.draw.path()
-      this.line.opacity(0.5)
-      this.node.styleLine(this.line, this.node)
-      // 同级位置占位符
-      this.placeholder = this.draw.rect().fill({
-        color: this.node.style.merge('lineColor', true)
-      })
-      this.mindMap.draw.add(this.clone)
-    }
-  }
-
-  //  移除克隆节点
-
-  removeCloneNode() {
-    if (!this.clone) {
-      return
-    }
-    this.clone.remove()
-    this.line.remove()
-    this.placeholder.remove()
-  }
-
-  //  拖动中
-
-  onMove(x, y) {
-    if (!this.isMousedown) {
-      return
-    }
-    this.createCloneNode()
-    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-    this.cloneNodeLeft = x - this.offsetX
-    this.cloneNodeTop = y - this.offsetY
-    x = (this.cloneNodeLeft - translateX) / scaleX
-    y = (this.cloneNodeTop - translateY) / scaleY
-    let t = this.clone.transform()
-    this.clone.translate(x - t.translateX, y - t.translateY)
-    // 连接线
-    let parent = this.node.parent
-    this.line.plot(
-      this.quadraticCurvePath(
-        parent.left + parent.width / 2,
-        parent.top + parent.height / 2,
-        x + this.node.width / 2,
-        y + this.node.height / 2
-      )
-    )
-    this.checkOverlapNode()
-  }
-
-  //  检测重叠节点
-
-  checkOverlapNode() {
-    if (!this.drawTransform) {
-      return
-    }
-    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-    let checkRight = this.cloneNodeLeft + this.node.width * scaleX
-    let checkBottom = this.cloneNodeTop + this.node.height * scaleX
-    this.overlapNode = null
-    this.prevNode = null
-    this.nextNode = null
-    this.placeholder.size(0, 0)
-    bfsWalk(this.mindMap.renderer.root, node => {
-      if (node.nodeData.data.isActive) {
-        this.mindMap.renderer.setNodeActive(node, false)
-      }
-      if (node === this.node || this.node.isParent(node)) {
-        return
-      }
-      if (this.overlapNode || (this.prevNode && this.nextNode)) {
-        return
-      }
-      let { left, top, width, height } = node
-      let _left = left
-      let _top = top
-      let _bottom = top + height
-      let right = (left + width) * scaleX + translateX
-      let bottom = (top + height) * scaleY + translateY
-      left = left * scaleX + translateX
-      top = top * scaleY + translateY
-      // 检测是否重叠
-      if (!this.overlapNode) {
-        if (
-          left <= checkRight &&
-          right >= this.cloneNodeLeft &&
-          top <= checkBottom &&
-          bottom >= this.cloneNodeTop
-        ) {
-          this.overlapNode = node
-        }
-      }
-      // 检测兄弟节点位置
-      if (!this.prevNode && !this.nextNode && !node.isRoot) {
-        // && this.node.isBrother(node)
-        if (left <= checkRight && right >= this.cloneNodeLeft) {
-          if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
-            this.prevNode = node
-            this.placeholder.size(node.width, 10).move(_left, _bottom)
-          } else if (checkBottom < top && checkBottom >= top - 10) {
-            this.nextNode = node
-            this.placeholder.size(node.width, 10).move(_left, _top - 10)
-          }
-        }
+import { bfsWalk, throttle } from './utils'
+import Base from './layouts/Base'
+
+//  节点拖动类
+
+class Drag extends Base {
+  //  构造函数
+
+  constructor({ mindMap }) {
+    super(mindMap.renderer)
+    this.mindMap = mindMap
+    this.reset()
+    this.bindEvent()
+  }
+
+  //  复位
+
+  reset() {
+    // 当前拖拽节点
+    this.node = null
+    // 当前重叠节点
+    this.overlapNode = null
+    // 当前上一个同级节点
+    this.prevNode = null
+    // 当前下一个同级节点
+    this.nextNode = null
+    // 画布的变换数据
+    this.drawTransform = null
+    // 克隆节点
+    this.clone = null
+    // 连接线
+    this.line = null
+    // 同级位置占位符
+    this.placeholder = null
+    // 鼠标按下位置和节点左上角的偏移量
+    this.offsetX = 0
+    this.offsetY = 0
+    // 克隆节点左上角的坐标
+    this.cloneNodeLeft = 0
+    this.cloneNodeTop = 0
+    // 当前鼠标是否按下
+    this.isMousedown = false
+    // 拖拽的鼠标位置变量
+    this.mouseDownX = 0
+    this.mouseDownY = 0
+    this.mouseMoveX = 0
+    this.mouseMoveY = 0
+  }
+
+  //  绑定事件
+
+  bindEvent() {
+    this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
+    this.mindMap.on('node_mousedown', (node, e) => {
+      if (this.mindMap.opt.readonly || node.isGeneralization) {
+        return
+      }
+      if (e.which !== 1 || node.isRoot) {
+        return
+      }
+      e.preventDefault()
+      // 计算鼠标按下的位置距离节点左上角的距离
+      this.drawTransform = this.mindMap.draw.transform()
+      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+      this.offsetX = x - (node.left * scaleX + translateX)
+      this.offsetY = y - (node.top * scaleY + translateY)
+      this.node = node
+      this.isMousedown = true
+      this.mouseDownX = x
+      this.mouseDownY = y
+    })
+    this.mindMap.on('mousemove', e => {
+      if (this.mindMap.opt.readonly) {
+        return
+      }
+      if (!this.isMousedown) {
+        return
+      }
+      e.preventDefault()
+      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+      this.mouseMoveX = x
+      this.mouseMoveY = y
+      if (
+        Math.abs(x - this.mouseDownX) <= 10 &&
+        Math.abs(y - this.mouseDownY) <= 10 &&
+        !this.node.isDrag
+      ) {
+        return
+      }
+      this.mindMap.renderer.clearAllActive()
+      this.onMove(x, y)
+    })
+    this.onMouseup = this.onMouseup.bind(this)
+    this.mindMap.on('node_mouseup', this.onMouseup)
+    this.mindMap.on('mouseup', this.onMouseup)
+  }
+
+  //  鼠标松开事件
+
+  onMouseup(e) {
+    if (!this.isMousedown) {
+      return
+    }
+    this.isMousedown = false
+    let _nodeIsDrag = this.node.isDrag
+    this.node.isDrag = false
+    this.node.show()
+    this.removeCloneNode()
+    // 存在重叠子节点，则移动作为其子节点
+    if (this.overlapNode) {
+      this.mindMap.renderer.setNodeActive(this.overlapNode, false)
+      this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode)
+    } else if (this.prevNode) {
+      // 存在前一个相邻节点，作为其下一个兄弟节点
+      this.mindMap.renderer.setNodeActive(this.prevNode, false)
+      this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode)
+    } else if (this.nextNode) {
+      // 存在下一个相邻节点，作为其前一个兄弟节点
+      this.mindMap.renderer.setNodeActive(this.nextNode, false)
+      this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
+    } else if (_nodeIsDrag && this.mindMap.opt.enableFreeDrag) {
+      // 自定义位置
+      let { x, y } = this.mindMap.toPos(
+        e.clientX - this.offsetX,
+        e.clientY - this.offsetY
+      )
+      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+      x = (x - translateX) / scaleX
+      y = (y - translateY) / scaleY
+      this.node.left = x
+      this.node.top = y
+      this.node.customLeft = x
+      this.node.customTop = y
+      this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y)
+      this.mindMap.render()
+    }
+    this.reset()
+  }
+
+  //  创建克隆节点
+
+  createCloneNode() {
+    if (!this.clone) {
+      // 节点
+      this.clone = this.node.group.clone()
+      this.clone.opacity(0.5)
+      this.clone.css('z-index', 99999)
+      this.node.isDrag = true
+      this.node.hide()
+      // 连接线
+      this.line = this.draw.path()
+      this.line.opacity(0.5)
+      this.node.styleLine(this.line, this.node)
+      // 同级位置占位符
+      this.placeholder = this.draw.rect().fill({
+        color: this.node.style.merge('lineColor', true)
+      })
+      this.mindMap.draw.add(this.clone)
+    }
+  }
+
+  //  移除克隆节点
+
+  removeCloneNode() {
+    if (!this.clone) {
+      return
+    }
+    this.clone.remove()
+    this.line.remove()
+    this.placeholder.remove()
+  }
+
+  //  拖动中
+
+  onMove(x, y) {
+    if (!this.isMousedown) {
+      return
+    }
+    this.createCloneNode()
+    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+    this.cloneNodeLeft = x - this.offsetX
+    this.cloneNodeTop = y - this.offsetY
+    x = (this.cloneNodeLeft - translateX) / scaleX
+    y = (this.cloneNodeTop - translateY) / scaleY
+    let t = this.clone.transform()
+    this.clone.translate(x - t.translateX, y - t.translateY)
+    // 连接线
+    let parent = this.node.parent
+    this.line.plot(
+      this.quadraticCurvePath(
+        parent.left + parent.width / 2,
+        parent.top + parent.height / 2,
+        x + this.node.width / 2,
+        y + this.node.height / 2
+      )
+    )
+    this.checkOverlapNode()
+  }
+
+  //  检测重叠节点
+
+  checkOverlapNode() {
+    if (!this.drawTransform) {
+      return
+    }
+    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+    let checkRight = this.cloneNodeLeft + this.node.width * scaleX
+    let checkBottom = this.cloneNodeTop + this.node.height * scaleX
+    this.overlapNode = null
+    this.prevNode = null
+    this.nextNode = null
+    this.placeholder.size(0, 0)
+    bfsWalk(this.mindMap.renderer.root, node => {
+      if (node.nodeData.data.isActive) {
+        this.mindMap.renderer.setNodeActive(node, false)
+      }
+      if (node === this.node || this.node.isParent(node)) {
+        return
+      }
+      if (this.overlapNode || (this.prevNode && this.nextNode)) {
+        return
+      }
+      let { left, top, width, height } = node
+      let _left = left
+      let _top = top
+      let _bottom = top + height
+      let right = (left + width) * scaleX + translateX
+      let bottom = (top + height) * scaleY + translateY
+      left = left * scaleX + translateX
+      top = top * scaleY + translateY
+      // 检测是否重叠
+      if (!this.overlapNode) {
+        if (
+          left <= checkRight &&
+          right >= this.cloneNodeLeft &&
+          top <= checkBottom &&
+          bottom >= this.cloneNodeTop
+        ) {
+          this.overlapNode = node
+        }
+      }
+      // 检测兄弟节点位置
+      if (!this.prevNode && !this.nextNode && !node.isRoot) {
+        // && this.node.isBrother(node)
+        if (left <= checkRight && right >= this.cloneNodeLeft) {
+          if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
+            this.prevNode = node
+            this.placeholder.size(node.width, 10).move(_left, _bottom)
+          } else if (checkBottom < top && checkBottom >= top - 10) {
+            this.nextNode = node
+            this.placeholder.size(node.width, 10).move(_left, _top - 10)
+          }
+        }
+      }
+    })
+    if (this.overlapNode) {
+      this.mindMap.renderer.setNodeActive(this.overlapNode, true)
+    }
+  }
+}
+
+Drag.instanceName = 'drag'
+
+export default Drag
--- a/simple-mind-map/src/Event.js
+++ b/simple-mind-map/src/Event.js
@@ -43,12 +43,7 @@ class Event extends EventEmitter {
    this.mindMap.svg.on('mousedown', this.onSvgMousedown)
    window.addEventListener('mousemove', this.onMousemove)
    window.addEventListener('mouseup', this.onMouseup)
-    // 兼容火狐浏览器
-    if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
-      this.mindMap.el.addEventListener('DOMMouseScroll', this.onMousewheel)
-    } else {
-      this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
-    }
+    this.mindMap.el.addEventListener('wheel', this.onMousewheel)
    this.mindMap.svg.on('contextmenu', this.onContextmenu)
    window.addEventListener('keyup', this.onKeyup)
  }
@@ -59,7 +54,7 @@ class Event extends EventEmitter {
    this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
    window.removeEventListener('mousemove', this.onMousemove)
    window.removeEventListener('mouseup', this.onMouseup)
-    this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
+    this.mindMap.el.removeEventListener('wheel', this.onMousewheel)
    this.mindMap.svg.off('contextmenu', this.onContextmenu)
    window.removeEventListener('keyup', this.onKeyup)
  }
@@ -110,10 +105,16 @@ class Event extends EventEmitter {
    e.stopPropagation()
    e.preventDefault()
    let dir
-    if ((e.wheelDeltaY || e.detail) > 0) {
-      dir = 'up'
+    // 解决mac触控板双指缩放方向相反的问题
+    if (e.ctrlKey) {
+      if (e.deltaY > 0) dir = 'up'
+      if (e.deltaY < 0) dir = 'down'
    } else {
-      dir = 'down'
+      if ((e.wheelDeltaY || e.detail) > 0) {
+        dir = 'up'
+      } else {
+        dir = 'down'
+      }
    }
    this.emit('mousewheel', e, dir, this)
  }
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -1,6 +1,7 @@
 import { imgToDataUrl, downloadFile } from './utils'
 import JsPDF from 'jspdf'
 import { SVG } from '@svgdotjs/svg.js'
+import drawBackgroundImageToCanvas from './utils/simulateCSSBackgroundInCanvas'
 const URL = window.URL || window.webkitURL || window

 //  导出类
@@ -25,8 +26,8 @@ class Export {
  }

  //  获取svg数据
-  async getSvgData() {
-    let { svg, svgHTML } = this.mindMap.miniMap.getMiniMap()
+  async getSvgData(domToImage) {
+    let { svg, svgHTML } = this.mindMap.getSvgData()
    // 把图片的url转换成data:url类型，否则导出会丢失图片
    let imageList = svg.find('image')
    let task = imageList.map(async item => {
@@ -35,9 +36,17 @@ class Export {
      item.attr('href', imgData)
    })
    await Promise.all(task)
+    // 如果开启了富文本编辑，需要把svg中的dom元素转换成图片
+    let nodeWithDomToImg = null
+    if (domToImage && this.mindMap.richText) {
+      let res = await this.mindMap.richText.handleSvgDomElements(svg)
+      nodeWithDomToImg = res.svg
+      svgHTML = res.svgHTML
+    }
    return {
      node: svg,
-      str: svgHTML
+      str: svgHTML,
+      nodeWithDomToImg
    }
  }

@@ -85,7 +94,9 @@ class Export {
      let {
        backgroundColor = '#fff',
        backgroundImage,
-        backgroundRepeat = 'repeat'
+        backgroundRepeat = 'no-repeat',
+        backgroundPosition = 'center center',
+        backgroundSize = 'cover',
      } = this.mindMap.themeConfig
      // 背景颜色
      ctx.save()
@@ -96,19 +107,18 @@ class Export {
      // 背景图片
      if (backgroundImage && backgroundImage !== 'none') {
        ctx.save()
-        let img = new Image()
-        img.src = backgroundImage
-        img.onload = () => {
-          let pat = ctx.createPattern(img, backgroundRepeat)
-          ctx.rect(0, 0, width, height)
-          ctx.fillStyle = pat
-          ctx.fill()
+        drawBackgroundImageToCanvas(ctx, width, height, backgroundImage, {
+          backgroundRepeat,
+          backgroundPosition,
+          backgroundSize
+        }, (err) => {
+          if (err) {
+            reject(err)
+          } else {
+            resolve()
+          }
          ctx.restore()
-          resolve()
-        }
-        img.onerror = e => {
-          reject(e)
-        }
+        })
      } else {
        resolve()
      }
@@ -121,7 +131,7 @@ class Export {
   * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
   */
  async png() {
-    let { str } = await this.getSvgData()
+    let { str } = await this.getSvgData(true)
    // 转换成blob数据
    let blob = new Blob([str], {
      type: 'image/svg+xml'
@@ -189,8 +199,21 @@ class Export {
  }

  //  导出为svg
-  async svg(name) {
-    let { node } = await this.getSvgData()
+  // domToImage：是否将svg中的dom节点转换成图片的形式
+  // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
+  async svg(name, domToImage = false, plusCssText) {
+    let { node, nodeWithDomToImg } = await this.getSvgData(domToImage)
+    // 开启了节点富文本编辑
+    if (this.mindMap.richText) {
+      if (domToImage) {
+        node = nodeWithDomToImg
+      } else if (plusCssText) {
+        let foreignObjectList = node.find('foreignObject')
+        if (foreignObjectList.length > 0) {
+          foreignObjectList[0].add(SVG(`<style>${plusCssText}</style>`))
+        }
+      }
+    }
    node.first().before(SVG(`<title>${name}</title>`))
    await this.drawBackgroundToSvg(node)
    let str = node.svg()
@@ -215,4 +238,6 @@ class Export {
  }
 }

+Export.instanceName = 'doExport'
+
 export default Export
--- a/simple-mind-map/src/KeyboardNavigation.js
+++ b/simple-mind-map/src/KeyboardNavigation.js
@@ -2,7 +2,7 @@ import { isKey } from './utils/keyMap'
 import { bfsWalk } from './utils'

 //  键盘导航类
-export default class KeyboardNavigation {
+class KeyboardNavigation {
  //  构造函数
  constructor(opt) {
    this.opt = opt
@@ -224,3 +224,7 @@ export default class KeyboardNavigation {
    }
  }
 }
+
+KeyboardNavigation.instanceName = 'keyboardNavigation'
+
+export default KeyboardNavigation
--- a/simple-mind-map/src/MiniMap.js
+++ b/simple-mind-map/src/MiniMap.js
@@ -14,43 +14,6 @@ class MiniMap {
    }
  }

-  //   获取小地图相关数据
-  getMiniMap() {
-    const svg = this.mindMap.svg
-    const draw = this.mindMap.draw
-    // 保存原始信息
-    const origWidth = svg.width()
-    const origHeight = svg.height()
-    const origTransform = draw.transform()
-    const elRect = this.mindMap.el.getBoundingClientRect()
-    // 去除放大缩小的变换效果
-    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
-    // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
-    const rect = draw.rbox()
-    // 将svg设置为实际内容的宽高
-    svg.size(rect.width, rect.height)
-    // 把实际内容变换
-    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
-    // 克隆一份数据
-    const clone = svg.clone()
-    // 恢复原先的大小和变换信息
-    svg.size(origWidth, origHeight)
-    draw.transform(origTransform)
-
-    return {
-      svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
-      svgHTML: clone.svg(), // svg字符串
-      rect: {
-        ...rect, // 思维导图图形未缩放时的位置尺寸等信息
-        ratio: rect.width / rect.height // 思维导图图形的宽高比
-      },
-      origWidth, // 画布宽度
-      origHeight, // 画布高度
-      scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
-      scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
-    }
-  }
-
  //  计算小地图的渲染数据
  /**
   * boxWidth：小地图容器的宽度
@@ -58,7 +21,7 @@ class MiniMap {
   */
  calculationMiniMap(boxWidth, boxHeight) {
    let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
-      this.getMiniMap()
+      this.mindMap.getSvgData()
    // 计算数据
    let boxRatio = boxWidth / boxHeight
    let actWidth = 0
@@ -144,4 +107,6 @@ class MiniMap {
  }
 }

+MiniMap.instanceName = 'miniMap'
+
 export default MiniMap
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
--- a/simple-mind-map/src/RichText.js
+++ b/simple-mind-map/src/RichText.js
@@ -0,0 +1,443 @@
+import Quill from 'quill'
+import 'quill/dist/quill.snow.css'
+import './css/quill.css'
+import html2canvas from 'html2canvas'
+import { Image as SvgImage } from '@svgdotjs/svg.js'
+import { walk } from './utils'
+
+let extended = false
+
+// 扩展quill的字体列表
+let fontFamilyList = [
+  '宋体, SimSun, Songti SC',
+  '微软雅黑, Microsoft YaHei',
+  '楷体, 楷体_GB2312, SimKai, STKaiti',
+  '黑体, SimHei, Heiti SC',
+  '隶书, SimLi',
+  'andale mono',
+  'arial, helvetica, sans-serif',
+  'arial black, avant garde',
+  'comic sans ms',
+  'impact, chicago',
+  'times new roman',
+  'sans-serif',
+  'serif'
+]
+
+// 扩展quill的字号列表
+let fontSizeList = new Array(100).fill(0).map((_, index) => {
+  return index + 'px'
+})
+
+// 节点支持富文本编辑功能
+class RichText {
+  constructor({ mindMap, pluginOpt }) {
+    this.mindMap = mindMap
+    this.pluginOpt = pluginOpt
+    this.textEditNode = null
+    this.showTextEdit = false
+    this.quill = null
+    this.range = null
+    this.lastRange = null
+    this.node = null
+    this.initOpt()
+    this.extendQuill()
+  }
+
+  // 处理选项参数
+  initOpt() {
+    if (
+      this.pluginOpt.fontFamilyList &&
+      Array.isArray(this.pluginOpt.fontFamilyList)
+    ) {
+      fontFamilyList = this.pluginOpt.fontFamilyList
+    }
+    if (
+      this.pluginOpt.fontSizeList &&
+      Array.isArray(this.pluginOpt.fontSizeList)
+    ) {
+      fontSizeList = this.pluginOpt.fontSizeList
+    }
+  }
+
+  // 扩展quill编辑器
+  extendQuill() {
+    if (extended) {
+      return
+    }
+    extended = true
+
+    // 扩展quill的字体列表
+    const FontAttributor = Quill.import('attributors/class/font')
+    FontAttributor.whitelist = fontFamilyList
+    Quill.register(FontAttributor, true)
+
+    const FontStyle = Quill.import('attributors/style/font')
+    FontStyle.whitelist = fontFamilyList
+    Quill.register(FontStyle, true)
+
+    // 扩展quill的字号列表
+    const SizeAttributor = Quill.import('attributors/class/size')
+    SizeAttributor.whitelist = fontSizeList
+    Quill.register(SizeAttributor, true)
+
+    const SizeStyle = Quill.import('attributors/style/size')
+    SizeStyle.whitelist = fontSizeList
+    Quill.register(SizeStyle, true)
+  }
+
+  // 显示文本编辑控件
+  showEditText(node, rect) {
+    if (this.showTextEdit) {
+      return
+    }
+    this.node = node
+    if (!rect) rect = node._textData.node.node.getBoundingClientRect()
+    this.mindMap.emit('before_show_text_edit')
+    this.mindMap.renderer.textEdit.registerTmpShortcut()
+    if (!this.textEditNode) {
+      this.textEditNode = document.createElement('div')
+      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;`
+      document.body.appendChild(this.textEditNode)
+    }
+    // 原始宽高
+    let g = node._textData.node
+    let originWidth = g.attr('data-width')
+    let originHeight = g.attr('data-height')
+    this.textEditNode.style.minWidth = originWidth + 'px'
+    this.textEditNode.style.minHeight = originHeight + 'px'
+    this.textEditNode.style.left =
+      rect.left + (rect.width - originWidth) / 2 + 'px'
+    this.textEditNode.style.top =
+      rect.top + (rect.height - originHeight) / 2 + 'px'
+    this.textEditNode.style.display = 'block'
+    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
+    this.textEditNode.style.transform = `scale(${rect.width / originWidth}, ${
+      rect.height / originHeight
+    })`
+    if (!node.nodeData.data.richText) {
+      // 还不是富文本的情况
+      let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
+      let html = `<p>${text}</p>`
+      this.textEditNode.innerHTML = html
+    } else {
+      this.textEditNode.innerHTML = node.nodeData.data.text
+    }
+    this.initQuillEditor()
+    document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
+    this.showTextEdit = true
+    this.selectAll()
+    if (!node.nodeData.data.richText) {
+      // 如果是非富文本的情况，需要手动应用文本样式
+      this.setTextStyleIfNotRichText(node)
+    }
+  }
+
+  // 如果是非富文本的情况，需要手动应用文本样式
+  setTextStyleIfNotRichText(node) {
+    let style = {
+      font: node.style.merge('fontFamily'),
+      color: node.style.merge('color'),
+      italic: node.style.merge('fontStyle') === 'italic',
+      bold: node.style.merge('fontWeight') === 'bold',
+      size: node.style.merge('fontSize') + 'px',
+      underline: node.style.merge('textDecoration') === 'underline',
+      strike: node.style.merge('textDecoration') === 'line-through'
+    }
+    this.formatText(style)
+  }
+
+  // 隐藏文本编辑控件，即完成编辑
+  hideEditText() {
+    if (!this.showTextEdit) {
+      return
+    }
+    let html = this.quill.container.firstChild.innerHTML
+    // 去除最后的空行
+    html = html.replace(/<p><br><\/p>$/, '')
+    this.mindMap.renderer.activeNodeList.forEach(node => {
+      this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
+      if (node.isGeneralization) {
+        // 概要节点
+        node.generalizationBelongNode.updateGeneralization()
+      }
+      this.mindMap.render()
+    })
+    this.mindMap.emit(
+      'hide_text_edit',
+      this.textEditNode,
+      this.mindMap.renderer.activeNodeList
+    )
+    this.textEditNode.style.display = 'none'
+    this.showTextEdit = false
+    this.mindMap.emit('rich_text_selection_change', false)
+    this.node = null
+  }
+
+  // 初始化Quill富文本编辑器
+  initQuillEditor() {
+    this.quill = new Quill(this.textEditNode, {
+      modules: {
+        toolbar: false,
+        keyboard: {
+          bindings: {
+            enter: {
+              key: 13,
+              handler: function () {
+                // 覆盖默认的回车键换行
+              }
+            }
+          }
+        }
+      },
+      theme: 'snow'
+    })
+    this.quill.on('selection-change', range => {
+      this.lastRange = this.range
+      this.range = null
+      if (range) {
+        let bounds = this.quill.getBounds(range.index, range.length)
+        let rect = this.textEditNode.getBoundingClientRect()
+        let rectInfo = {
+          left: bounds.left + rect.left,
+          top: bounds.top + rect.top,
+          right: bounds.right + rect.left,
+          bottom: bounds.bottom + rect.top,
+          width: bounds.width
+        }
+        let formatInfo = this.quill.getFormat(range.index, range.length)
+        let hasRange = false
+        if (range.length == 0) {
+          hasRange = false
+        } else {
+          this.range = range
+          hasRange = true
+        }
+        this.mindMap.emit(
+          'rich_text_selection_change',
+          hasRange,
+          rectInfo,
+          formatInfo
+        )
+      }
+    })
+  }
+
+  // 选中全部
+  selectAll() {
+    this.quill.setSelection(0, this.quill.getLength())
+  }
+
+  // 格式化当前选中的文本
+  formatText(config = {}, clear = false) {
+    if (!this.range && !this.lastRange) return
+    this.syncFormatToNodeConfig(config, clear)
+    let rangeLost = !this.range
+    let range = rangeLost ? this.lastRange : this.range
+    clear ? this.quill.removeFormat(range.index, range.length) : this.quill.formatText(range.index, range.length, config)
+    if (rangeLost) {
+      this.quill.setSelection(this.lastRange.index, this.lastRange.length)
+    }
+  }
+
+  // 清除当前选中文本的样式
+  removeFormat() {
+    this.formatText({}, true)
+  }
+
+  // 格式化指定范围的文本
+  formatRangeText(range, config = {}) {
+    if (!range) return
+    this.syncFormatToNodeConfig(config)
+    this.quill.formatText(range.index, range.length, config)
+  }
+
+  // 格式化所有文本
+  formatAllText(config = {}) {
+    this.syncFormatToNodeConfig(config)
+    this.quill.formatText(0, this.quill.getLength(), config)
+  }
+
+  // 同步格式化到节点样式配置
+  syncFormatToNodeConfig(config, clear) {
+    if (!this.node) return
+    if (clear) {
+      // 清除文本样式
+      ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textDecoration', 'color'].forEach((prop) => {
+        delete this.node.nodeData.data[prop]
+      })
+    } else {
+      let data = this.richTextStyleToNormalStyle(config)
+      this.mindMap.renderer.setNodeData(this.node, data)
+    }
+  }
+
+  // 将普通节点样式对象转换成富文本样式对象
+  normalStyleToRichTextStyle(style) {
+    let config = {}
+    Object.keys(style).forEach(prop => {
+      let value = style[prop]
+      switch (prop) {
+        case 'fontFamily':
+          config.font = value
+          break
+        case 'fontSize':
+          config.size = value + 'px'
+          break
+        case 'fontWeight':
+          config.bold = value === 'bold'
+          break
+        case 'fontStyle':
+          config.italic = value === 'italic'
+          break
+        case 'textDecoration':
+          config.underline = value === 'underline'
+          config.strike = value === 'line-through'
+          break
+        case 'color':
+          config.color = value
+          break
+        default:
+          break
+      }
+    })
+    return config
+  }
+
+  // 将富文本样式对象转换成普通节点样式对象
+  richTextStyleToNormalStyle(config) {
+    let data = {}
+    Object.keys(config).forEach(prop => {
+      let value = config[prop]
+      switch (prop) {
+        case 'font':
+          data.fontFamily = value
+          break
+        case 'size':
+          data.fontSize = parseFloat(value)
+          break
+        case 'bold':
+          data.fontWeight = value ? 'bold' : 'normal'
+          break
+        case 'italic':
+          data.fontStyle = value ? 'italic' : 'normal'
+          break
+        case 'underline':
+          data.textDecoration = value ? 'underline' : 'none'
+          break
+        case 'strike':
+          data.textDecoration = value ? 'line-through' : 'none'
+          break
+        case 'color':
+          data.color = value
+          break
+        default:
+          break
+      }
+    })
+    return data
+  }
+
+  // 将svg中嵌入的dom元素转换成图片
+  async _handleSvgDomElements(svg) {
+    svg = svg.clone()
+    let foreignObjectList = svg.find('foreignObject')
+    let task = foreignObjectList.map(async item => {
+      let clone = item.first().node.cloneNode(true)
+      let div = document.createElement('div')
+      div.style.cssText = `position: fixed; left: -999999px;`
+      div.appendChild(clone)
+      this.mindMap.el.appendChild(div)
+      let canvas = await html2canvas(clone, {
+        backgroundColor: null
+      })
+      this.mindMap.el.removeChild(div)
+      let imgNode = new SvgImage()
+        .load(canvas.toDataURL())
+        .size(canvas.width, canvas.height)
+      item.replace(imgNode)
+    })
+    await Promise.all(task)
+    return {
+      svg: svg,
+      svgHTML: svg.svg()
+    }
+  }
+
+  // 将svg中嵌入的dom元素转换成图片
+  handleSvgDomElements(svg) {
+    return new Promise((resolve, reject) => {
+      svg = svg.clone()
+      let foreignObjectList = svg.find('foreignObject')
+      let index = 0
+      let len = foreignObjectList.length
+      let transform = async () => {
+        this.mindMap.emit('transforming-dom-to-images', index, len)
+        try {
+          let item = foreignObjectList[index++]
+          let parent = item.parent()
+          let clone = item.first().node.cloneNode(true)
+          let div = document.createElement('div')
+          div.style.cssText = `position: fixed; left: -999999px;`
+          div.appendChild(clone)
+          this.mindMap.el.appendChild(div)
+          let canvas = await html2canvas(clone, {
+            backgroundColor: null
+          })
+          // 优先使用原始宽高，因为当设备的window.devicePixelRatio不为1时，html2canvas输出的图片会更大
+          let imgNodeWidth = parent.attr('data-width') || canvas.width
+          let imgNodeHeight = parent.attr('data-height') || canvas.height
+          this.mindMap.el.removeChild(div)
+          let imgNode = new SvgImage()
+            .load(canvas.toDataURL())
+            .size(imgNodeWidth, imgNodeHeight)
+            .x((parent ? parent.attr('data-offsetx') : 0) || 0)
+          item.replace(imgNode)
+          if (index <= len - 1) {
+            setTimeout(() => {
+              transform()
+            }, 0)
+          } else {
+            resolve({
+              svg: svg,
+              svgHTML: svg.svg()
+            })
+          }
+        } catch (error) {
+          reject(error)
+        }
+      }
+      if (len > 0) transform()
+    })
+  }
+
+  // 将所有节点转换成非富文本节点
+  transformAllNodesToNormalNode() {
+    let div = document.createElement('div')
+    walk(
+      this.mindMap.renderer.renderTree,
+      null,
+      node => {
+        if (node.data.richText) {
+          node.data.richText = false
+          div.innerHTML = node.data.text
+          node.data.text = div.textContent
+        }
+      },
+      null,
+      true,
+      0,
+      0
+    )
+    this.mindMap.reRender()
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.transformAllNodesToNormalNode()
+  }
+}
+
+RichText.instanceName = 'richText'
+
+export default RichText
--- a/simple-mind-map/src/Select.js
+++ b/simple-mind-map/src/Select.js
@@ -167,4 +167,6 @@ class Select {
  }
 }

+Select.instanceName = 'select'
+
 export default Select
--- a/simple-mind-map/src/Style.js
+++ b/simple-mind-map/src/Style.js
@@ -1,167 +1,200 @@
-import { tagColorList } from './utils/constant'
-const rootProp = ['paddingX', 'paddingY']
-
-//  样式类
-
-class Style {
-  //   设置背景样式
-
-  static setBackgroundStyle(el, themeConfig) {
-    let { backgroundColor, backgroundImage, backgroundRepeat } = themeConfig
-    el.style.backgroundColor = backgroundColor
-    if (backgroundImage) {
-      el.style.backgroundImage = `url(${backgroundImage})`
-      el.style.backgroundRepeat = backgroundRepeat
-    }
-  }
-
-  //  构造函数
-
-  constructor(ctx, themeConfig) {
-    this.ctx = ctx
-    this.themeConfig = themeConfig
-  }
-
-  //  更新主题配置
-
-  updateThemeConfig(themeConfig) {
-    this.themeConfig = themeConfig
-  }
-
-  //  合并样式
-
-  merge(prop, root, isActive) {
-    // 三级及以下节点
-    let defaultConfig = this.themeConfig.node
-    if (root || rootProp.includes(prop)) {
-      // 直接使用最外层样式
-      defaultConfig = this.themeConfig
-    } else if (this.ctx.isGeneralization) {
-      // 概要节点
-      defaultConfig = this.themeConfig.generalization
-    } else if (this.ctx.layerIndex === 0) {
-      // 根节点
-      defaultConfig = this.themeConfig.root
-    } else if (this.ctx.layerIndex === 1) {
-      // 二级节点
-      defaultConfig = this.themeConfig.second
-    }
-    // 激活状态
-    if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
-      if (
-        this.ctx.nodeData.data.activeStyle &&
-        this.ctx.nodeData.data.activeStyle[prop] !== undefined
-      ) {
-        return this.ctx.nodeData.data.activeStyle[prop]
-      } else if (defaultConfig.active && defaultConfig.active[prop]) {
-        return defaultConfig.active[prop]
-      }
-    }
-    // 优先使用节点本身的样式
-    return this.getSelfStyle(prop) !== undefined
-      ? this.getSelfStyle(prop)
-      : defaultConfig[prop]
-  }
-
-  //  获取某个样式值
-
-  getStyle(prop, root, isActive) {
-    return this.merge(prop, root, isActive)
-  }
-
-  //  获取自身自定义样式
-
-  getSelfStyle(prop) {
-    return this.ctx.nodeData.data[prop]
-  }
-
-  //  矩形
-
-  rect(node) {
-    this.shape(node)
-    node.radius(this.merge('borderRadius'))
-  }
-
-  //   矩形外的其他形状
-
-  shape(node) {
-    node.fill({
-      color: this.merge('fillColor')
-    })
-    // 节点使用横线样式，不需要渲染非激活状态的边框样式
-    if (
-      !this.ctx.isRoot &&
-      !this.ctx.isGeneralization &&
-      this.themeConfig.nodeUseLineStyle &&
-      !this.ctx.nodeData.data.isActive
-    ) {
-      return
-    }
-    node.stroke({
-      color: this.merge('borderColor'),
-      width: this.merge('borderWidth'),
-      dasharray: this.merge('borderDasharray')
-    })
-  }
-
-  //  文字
-
-  text(node) {
-    node
-      .fill({
-        color: this.merge('color')
-      })
-      .css({
-        'font-family': this.merge('fontFamily'),
-        'font-size': this.merge('fontSize'),
-        'font-weight': this.merge('fontWeight'),
-        'font-style': this.merge('fontStyle'),
-        'text-decoration': this.merge('textDecoration')
-      })
-  }
-
-  //  html文字节点
-
-  domText(node, fontSizeScale = 1) {
-    node.style.fontFamily = this.merge('fontFamily')
-    node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
-    node.style.fontWeight = this.merge('fontWeight') || 'normal'
-  }
-
-  //  标签文字
-
-  tagText(node, index) {
-    node
-      .fill({
-        color: tagColorList[index].color
-      })
-      .css({
-        'font-size': '12px'
-      })
-  }
-
-  //  标签矩形
-
-  tagRect(node, index) {
-    node.fill({
-      color: tagColorList[index].background
-    })
-  }
-
-  //  内置图标
-
-  iconNode(node) {
-    node.attr({
-      fill: this.merge('color')
-    })
-  }
-
-  //  连线
-
-  line(node, { width, color, dasharray } = {}) {
-    node.stroke({ width, color, dasharray }).fill({ color: 'none' })
-  }
-
-  //  概要连线
-
-  generalizationLine(node) {
+import { tagColorList } from './utils/constant'
+const rootProp = ['paddingX', 'paddingY']
+
+//  样式类
+
+class Style {
+  //   设置背景样式
+
+  static setBackgroundStyle(el, themeConfig) {
+    let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
+    el.style.backgroundColor = backgroundColor
+    if (backgroundImage) {
+      el.style.backgroundImage = `url(${backgroundImage})`
+      el.style.backgroundRepeat = backgroundRepeat
+      el.style.backgroundPosition = backgroundPosition
+      el.style.backgroundSize = backgroundSize
+    } else {
+      el.style.backgroundImage = 'none'
+    }
+  }
+
+  //  构造函数
+
+  constructor(ctx, themeConfig) {
+    this.ctx = ctx
+    this.themeConfig = themeConfig
+  }
+
+  //  更新主题配置
+
+  updateThemeConfig(themeConfig) {
+    this.themeConfig = themeConfig
+  }
+
+  //  合并样式
+
+  merge(prop, root, isActive) {
+    // 三级及以下节点
+    let defaultConfig = this.themeConfig.node
+    if (root || rootProp.includes(prop)) {
+      // 直接使用最外层样式
+      defaultConfig = this.themeConfig
+    } else if (this.ctx.isGeneralization) {
+      // 概要节点
+      defaultConfig = this.themeConfig.generalization
+    } else if (this.ctx.layerIndex === 0) {
+      // 根节点
+      defaultConfig = this.themeConfig.root
+    } else if (this.ctx.layerIndex === 1) {
+      // 二级节点
+      defaultConfig = this.themeConfig.second
+    }
+    // 激活状态
+    if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
+      if (
+        this.ctx.nodeData.data.activeStyle &&
+        this.ctx.nodeData.data.activeStyle[prop] !== undefined
+      ) {
+        return this.ctx.nodeData.data.activeStyle[prop]
+      } else if (defaultConfig.active && defaultConfig.active[prop]) {
+        return defaultConfig.active[prop]
+      }
+    }
+    // 优先使用节点本身的样式
+    return this.getSelfStyle(prop) !== undefined
+      ? this.getSelfStyle(prop)
+      : defaultConfig[prop]
+  }
+
+  //  获取某个样式值
+
+  getStyle(prop, root, isActive) {
+    return this.merge(prop, root, isActive)
+  }
+
+  //  获取自身自定义样式
+
+  getSelfStyle(prop) {
+    return this.ctx.nodeData.data[prop]
+  }
+
+  //  矩形
+
+  rect(node) {
+    this.shape(node)
+    node.radius(this.merge('borderRadius'))
+  }
+
+  //   矩形外的其他形状
+
+  shape(node) {
+    node.fill({
+      color: this.merge('fillColor')
+    })
+    // 节点使用横线样式，不需要渲染非激活状态的边框样式
+    if (
+      !this.ctx.isRoot &&
+      !this.ctx.isGeneralization &&
+      this.themeConfig.nodeUseLineStyle &&
+      !this.ctx.nodeData.data.isActive
+    ) {
+      return
+    }
+    node.stroke({
+      color: this.merge('borderColor'),
+      width: this.merge('borderWidth'),
+      dasharray: this.merge('borderDasharray')
+    })
+  }
+
+  //  文字
+
+  text(node) {
+    node
+      .fill({
+        color: this.merge('color')
+      })
+      .css({
+        'font-family': this.merge('fontFamily'),
+        'font-size': this.merge('fontSize'),
+        'font-weight': this.merge('fontWeight'),
+        'font-style': this.merge('fontStyle'),
+        'text-decoration': this.merge('textDecoration')
+      })
+  }
+
+  // 获取文本样式
+  getTextFontStyle() {
+    return { 
+      italic: this.merge('fontStyle') === 'italic', 
+      bold: this.merge('fontWeight'), 
+      fontSize: this.merge('fontSize'), 
+      fontFamily: this.merge('fontFamily')
+    }
+  }
+
+  //  html文字节点
+
+  domText(node, fontSizeScale = 1) {
+    node.style.fontFamily = this.merge('fontFamily')
+    node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
+    node.style.fontWeight = this.merge('fontWeight') || 'normal'
+    node.style.lineHeight = this.merge('lineHeight')
+    node.style.fontStyle = this.merge('fontStyle')
+  }
+
+  //  标签文字
+
+  tagText(node, index) {
+    node
+      .fill({
+        color: tagColorList[index].color
+      })
+      .css({
+        'font-size': '12px'
+      })
+  }
+
+  //  标签矩形
+
+  tagRect(node, index) {
+    node.fill({
+      color: tagColorList[index].background
+    })
+  }
+
+  //  内置图标
+
+  iconNode(node) {
+    node.attr({
+      fill: this.merge('color')
+    })
+  }
+
+  //  连线
+
+  line(node, { width, color, dasharray } = {}) {
+    node.stroke({ width, color, dasharray }).fill({ color: 'none' })
+  }
+
+  //  概要连线
+
+  generalizationLine(node) {
+    node
+      .stroke({
+        width: this.merge('generalizationLineWidth', true),
+        color: this.merge('generalizationLineColor', true)
+      })
+      .fill({ color: 'none' })
+  }
+
+  //  按钮
+
+  iconBtn(node, fillNode) {
+    node.fill({ color: '#808080' })
+    fillNode.fill({ color: '#fff' })
+  }
+}
+
+export default Style
--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -50,7 +50,12 @@ export default class TextEdit {

  //  显示文本编辑框
  show(node) {
-    this.showEditTextBox(node, node._textData.node.node.getBoundingClientRect())
+    let rect = node._textData.node.node.getBoundingClientRect()
+    if (this.mindMap.richText) {
+      this.mindMap.richText.showEditText(node, rect)
+      return
+    }
+    this.showEditTextBox(node, rect)
  }

  //  显示文本编辑框
@@ -59,14 +64,17 @@ export default class TextEdit {
    this.registerTmpShortcut()
    if (!this.textEditNode) {
      this.textEditNode = document.createElement('div')
-      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`
+      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
      this.textEditNode.setAttribute('contenteditable', true)
      this.textEditNode.addEventListener('keyup', e => {
        e.stopPropagation()
      })
      document.body.appendChild(this.textEditNode)
    }
-    node.style.domText(this.textEditNode, this.mindMap.view.scale)
+    let scale = this.mindMap.view.scale
+    let lineHeight = node.style.merge('lineHeight')
+    let fontSize = node.style.merge('fontSize')
+    node.style.domText(this.textEditNode, scale)
    this.textEditNode.innerHTML = node.nodeData.data.text
      .split(/\n/gim)
      .join('<br>')
@@ -75,6 +83,8 @@ export default class TextEdit {
    this.textEditNode.style.left = rect.left + 'px'
    this.textEditNode.style.top = rect.top + 'px'
    this.textEditNode.style.display = 'block'
+    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth * scale + 'px'
+    this.textEditNode.style.transform = `translateY(${-(lineHeight * fontSize - fontSize) / 2 * scale}px)`
    this.showTextEdit = true
    // 选中文本
    this.selectNodeText()
@@ -91,6 +101,9 @@ export default class TextEdit {

  //  隐藏文本编辑框
  hideEditTextBox() {
+    if (this.mindMap.richText) {
+      return this.mindMap.richText.hideEditText()
+    }
    if (!this.showTextEdit) {
      return
    }
--- a/simple-mind-map/src/Watermark.js
+++ b/simple-mind-map/src/Watermark.js
@@ -0,0 +1,120 @@
+import { Text, G } from '@svgdotjs/svg.js'
+import { degToRad, camelCaseToHyphen } from './utils'
+import merge from 'deepmerge'
+
+// 水印类
+class Watermark {
+  constructor(opt = {}) {
+    this.mindMap = opt.mindMap
+    this.lineSpacing = 0 // 水印行间距
+    this.textSpacing = 0 // 行内水印间距
+    this.angle = 0 // 旋转角度
+    this.text = '' // 水印文字
+    this.textStyle = {} // 水印文字样式
+    this.watermarkDraw = this.mindMap.svg
+      .group()
+      .css({ 'pointer-events': 'none', 'user-select': 'none' })
+    this.maxLong = Math.sqrt(
+      Math.pow(this.mindMap.width, 2) + Math.pow(this.mindMap.height, 2)
+    )
+    this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
+  }
+
+  // 获取是否存在水印
+  hasWatermark() {
+    return !!this.text.trim()
+  }
+
+  // 处理水印配置
+  handleConfig({ text, lineSpacing, textSpacing, angle, textStyle }) {
+    this.text = text === undefined ? '' : String(text).trim()
+    this.lineSpacing =
+      typeof lineSpacing === 'number' && lineSpacing > 0 ? lineSpacing : 100
+    this.textSpacing =
+      typeof textSpacing === 'number' && textSpacing > 0 ? textSpacing : 100
+    this.angle =
+      typeof angle === 'number' && angle >= 0 && angle <= 90 ? angle : 30
+    this.textStyle = Object.assign(this.textStyle, textStyle || {})
+  }
+
+  // 绘制水印
+  // 非精确绘制，会绘制一些超出可视区域的水印
+  draw() {
+    this.watermarkDraw.clear()
+    if (!this.hasWatermark()) {
+      return
+    }
+    let x = 0
+    while (x < this.mindMap.width) {
+      this.drawText(x)
+      x += this.lineSpacing / Math.sin(degToRad(this.angle))
+    }
+
+    let yOffset =
+      this.lineSpacing / Math.cos(degToRad(this.angle)) || this.lineSpacing
+    let y = yOffset
+    while (y < this.mindMap.height) {
+      this.drawText(0, y)
+      y += yOffset
+    }
+  }
+
+  // 绘制文字
+  drawText(x, y) {
+    let long = Math.min(
+      this.maxLong,
+      (this.mindMap.width - x) / Math.cos(degToRad(this.angle))
+    )
+    let g = new G()
+    let bbox = null
+    let bboxWidth = 0
+    let textHeight = -1
+    while (bboxWidth < long) {
+      let text = new Text().text(this.text)
+      g.add(text)
+      text.transform({
+        translateX: bboxWidth
+      })
+      this.setTextStyle(text)
+      bbox = g.bbox()
+      if (textHeight === -1) {
+        textHeight = bbox.height
+      }
+      bboxWidth = bbox.width + this.textSpacing
+    }
+    let params = {
+      rotate: this.angle,
+      origin: 'top left',
+      translateX: x,
+      translateY: textHeight
+    }
+    if (y !== undefined) {
+      params.translateY = y + textHeight
+    }
+    g.transform(params)
+    this.watermarkDraw.add(g)
+  }
+
+  // 给文字设置样式
+  setTextStyle(text) {
+    Object.keys(this.textStyle).forEach(item => {
+      let value = this.textStyle[item]
+      if (item === 'color') {
+        text.fill(value)
+      } else {
+        text.css(camelCaseToHyphen(item), value)
+      }
+    })
+  }
+
+  // 更新水印
+  updateWatermark(config) {
+    this.mindMap.opt.watermarkConfig = merge(this.mindMap.opt.watermarkConfig, config)
+    this.handleConfig(config)
+    this.draw()
+  }
+}
+
+Watermark.instanceName = 'watermark'
+
+export default Watermark
--- a/simple-mind-map/src/css/quill.css
+++ b/simple-mind-map/src/css/quill.css
@@ -0,0 +1,10 @@
+.ql-editor {
+    overflow: hidden;
+    padding: 0;
+    height: auto;
+}
+
+.ql-container {
+    height: auto;
+    font-size: inherit;
+}
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -1,267 +1,289 @@
-import Base from './Base'
-import { walk, asyncRun } from '../utils'
-
-//  逻辑结构图
-
-class LogicalStructure extends Base {
-  //  构造函数
-
-  constructor(opt = {}) {
-    super(opt)
-  }
-
-  //  布局
-
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedTopValue()
-      },
-      () => {
-        this.adjustTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
-
-  //  遍历数据计算节点的left、width、height
-
-  computedBaseValue() {
-    walk(
-      this.renderer.renderTree,
-      null,
-      (cur, parent, isRoot, layerIndex) => {
-        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
-        // 根节点定位在画布中心位置
-        if (isRoot) {
-          this.setNodeCenter(newNode)
-        } else {
-          // 非根节点
-          // 定位到父节点右侧
-          newNode.left =
-            parent._node.left + parent._node.width + this.getMarginX(layerIndex)
-        }
-        if (!cur.data.expand) {
-          return true
-        }
-      },
-      (cur, parent, isRoot, layerIndex) => {
-        // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
-        let len = cur.data.expand === false ? 0 : cur._node.children.length
-        cur._node.childrenAreaHeight = len
-          ? cur._node.children.reduce((h, item) => {
-              return h + item.height
-            }, 0) +
-            (len + 1) * this.getMarginY(layerIndex + 1)
-          : 0
-      },
-      true,
-      0
-    )
-  }
-
-  //  遍历节点树计算节点的top
-
-  computedTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (
-          node.nodeData.data.expand &&
-          node.children &&
-          node.children.length
-        ) {
-          let marginY = this.getMarginY(layerIndex + 1)
-          // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
-          let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
-          let totalTop = top + marginY
-          node.children.forEach(cur => {
-            cur.top = totalTop
-            totalTop += cur.height + marginY
-          })
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  调整节点top
-
-  adjustTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
-          return
-        }
-        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
-        let difference =
-          node.childrenAreaHeight -
-          this.getMarginY(layerIndex + 1) * 2 -
-          node.height
-        if (difference > 0) {
-          this.updateBrothers(node, difference / 2)
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  更新兄弟节点的top
-
-  updateBrothers(node, addHeight) {
-    if (node.parent) {
-      let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
-      childrenList.forEach((item, _index) => {
-        if (item === node || item.hasCustomPosition()) {
-          // 适配自定义位置
-          return
-        }
-        let _offset = 0
-        // 上面的节点往上移
-        if (_index < index) {
-          _offset = -addHeight
-        } else if (_index > index) {
-          // 下面的节点往下移
-          _offset = addHeight
-        }
-        item.top += _offset
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'top', _offset)
-        }
-      })
-      // 更新父节点的位置
-      this.updateBrothers(node.parent, addHeight)
-    }
-  }
-
-  //  绘制连线，连接该节点到其子节点
-
-  renderLine(node, lines, style, lineStyle) {
-    if (lineStyle === 'curve') {
-      this.renderLineCurve(node, lines, style)
-    } else if (lineStyle === 'direct') {
-      this.renderLineDirect(node, lines, style)
-    } else {
-      this.renderLineStraight(node, lines, style)
-    }
-  }
-
-  //  直线风格连线
-
-  renderLineStraight(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    let marginX = this.getMarginX(node.layerIndex + 1)
-    let s1 = (marginX - expandBtnSize) * 0.6
-    node.children.forEach((item, index) => {
-      let x1 =
-        node.layerIndex === 0 ? left + width : left + width + expandBtnSize
-      let y1 = top + height / 2
-      let x2 = item.left
-      let y2 = item.top + item.height / 2
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
-        ? item.width
-        : 0
-      let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
-        x2 + nodeUseLineStyleOffset
-      },${y2}`
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-  }
-
-  //  直连风格
-
-  renderLineDirect(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    node.children.forEach((item, index) => {
-      let x1 =
-        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
-      let y1 = top + height / 2
-      let x2 = item.left
-      let y2 = item.top + item.height / 2
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
-        ? ` L ${item.left + item.width},${y2}`
-        : ''
-      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-  }
-
-  //  曲线风格连线
-
-  renderLineCurve(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    node.children.forEach((item, index) => {
-      let x1 =
-        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
-      let y1 = top + height / 2
-      let x2 = item.left
-      let y2 = item.top + item.height / 2
-      let path = ''
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
-        ? ` L ${item.left + item.width},${y2}`
-        : ''
-      if (node.isRoot) {
-        path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
-      } else {
-        path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
-      }
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-  }
-
-  //  渲染按钮
-
-  renderExpandBtn(node, btn) {
-    let { width, height } = node
-    let { translateX, translateY } = btn.transform()
-    // 节点使用横线风格，需要调整展开收起按钮位置
-    let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
-      ? height / 2
-      : 0
-    btn.translate(
-      width - translateX,
-      height / 2 - translateY + nodeUseLineStyleOffset
-    )
-  }
-
-  //  创建概要节点
-
-  renderGeneralization(node, gLine, gNode) {
-    let {
-      top,
-      bottom,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'h')
-    let x1 = right + generalizationLineMargin
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
+
+//  逻辑结构图
+
+class LogicalStructure extends Base {
+  //  构造函数
+
+  constructor(opt = {}) {
+    super(opt)
+  }
+
+  //  布局
+
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedTopValue()
+      },
+      () => {
+        this.adjustTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据计算节点的left、width、height
+
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (cur, parent, isRoot, layerIndex) => {
+        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 定位到父节点右侧
+          newNode.left =
+            parent._node.left + parent._node.width + this.getMarginX(layerIndex)
+        }
+        if (!cur.data.expand) {
+          return true
+        }
+      },
+      (cur, parent, isRoot, layerIndex) => {
+        // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
+        let len = cur.data.expand === false ? 0 : cur._node.children.length
+        cur._node.childrenAreaHeight = len
+          ? cur._node.children.reduce((h, item) => {
+              return h + item.height
+            }, 0) +
+            (len + 1) * this.getMarginY(layerIndex + 1)
+          : 0
+      },
+      true,
+      0
+    )
+  }
+
+  //  遍历节点树计算节点的top
+
+  computedTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (
+          node.nodeData.data.expand &&
+          node.children &&
+          node.children.length
+        ) {
+          let marginY = this.getMarginY(layerIndex + 1)
+          // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+          let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
+          let totalTop = top + marginY
+          node.children.forEach(cur => {
+            cur.top = totalTop
+            totalTop += cur.height + marginY
+          })
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点top
+
+  adjustTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+        let difference =
+          node.childrenAreaHeight -
+          this.getMarginY(layerIndex + 1) * 2 -
+          node.height
+        if (difference > 0) {
+          this.updateBrothers(node, difference / 2)
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  更新兄弟节点的top
+
+  updateBrothers(node, addHeight) {
+    if (node.parent) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item === node || item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 上面的节点往上移
+        if (_index < index) {
+          _offset = -addHeight
+        } else if (_index > index) {
+          // 下面的节点往下移
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothers(node.parent, addHeight)
+    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+
+  renderLine(node, lines, style, lineStyle) {
+    if (lineStyle === 'curve') {
+      this.renderLineCurve(node, lines, style)
+    } else if (lineStyle === 'direct') {
+      this.renderLineDirect(node, lines, style)
+    } else {
+      this.renderLineStraight(node, lines, style)
+    }
+  }
+
+  //  直线风格连线
+
+  renderLineStraight(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    let marginX = this.getMarginX(node.layerIndex + 1)
+    let s1 = (marginX - expandBtnSize) * 0.6
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    node.children.forEach((item, index) => {
+      let x1 =
+        node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = item.left
+      let y2 = item.top + item.height / 2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStyleOffset = nodeUseLineStyle
+        ? item.width
+        : 0
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
+        x2 + nodeUseLineStyleOffset
+      },${y2}`
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  //  直连风格
+
+  renderLineDirect(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    node.children.forEach((item, index) => {
+      let x1 =
+        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = item.left
+      let y2 = item.top + item.height / 2
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = nodeUseLineStyle
+        ? ` L ${item.left + item.width},${y2}`
+        : ''
+      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  //  曲线风格连线
+
+  renderLineCurve(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    node.children.forEach((item, index) => {
+      let x1 =
+        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = item.left
+      let y2 = item.top + item.height / 2
+      let path = ''
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = nodeUseLineStyle
+        ? ` L ${item.left + item.width},${y2}`
+        : ''
+      if (node.isRoot) {
+        path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
+      } else {
+        path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
+      }
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  //  渲染按钮
+
+  renderExpandBtn(node, btn) {
+    let { width, height } = node
+    let { translateX, translateY } = btn.transform()
+    // 节点使用横线风格，需要调整展开收起按钮位置
+    let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
+      ? height / 2
+      : 0
+    btn.translate(
+      width - translateX,
+      height / 2 - translateY + nodeUseLineStyleOffset
+    )
+  }
+
+  //  创建概要节点
+
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      top,
+      bottom,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h')
+    let x1 = right + generalizationLineMargin
+    let y1 = top
+    let x2 = right + generalizationLineMargin
+    let y2 = bottom
+    let cx = x1 + 20
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left = right + generalizationNodeMargin
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
+}
+
+export default LogicalStructure
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -208,11 +208,12 @@ class MindMap extends Base {
    let { left, top, width, height, expandBtnSize } = node
    let marginX = this.getMarginX(node.layerIndex + 1)
    let s1 = (marginX - expandBtnSize) * 0.6
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 = 0
      let _s = 0
      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
+      let nodeUseLineStyleOffset = nodeUseLineStyle
        ? item.width
        : 0
      if (item.dir === 'left') {
@@ -226,6 +227,8 @@ class MindMap extends Base {
      let y1 = top + height / 2
      let x2 = item.dir === 'left' ? item.left + item.width : item.left
      let y2 = item.top + item.height / 2
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
      let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${
        x2 + nodeUseLineStyleOffset
      },${y2}`
@@ -241,6 +244,7 @@ class MindMap extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0
@@ -251,9 +255,11 @@ class MindMap extends Base {
      let y1 = top + height / 2
      let x2 = item.dir === 'left' ? item.left + item.width : item.left
      let y2 = item.top + item.height / 2
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
      // 节点使用横线风格，需要额外渲染横线
      let nodeUseLineStylePath = ''
-      if (this.mindMap.themeConfig.nodeUseLineStyle) {
+      if (nodeUseLineStyle) {
        if (item.dir === 'left') {
          nodeUseLineStylePath = ` L ${item.left},${y2}`
        } else {
@@ -273,6 +279,7 @@ class MindMap extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0
@@ -284,6 +291,8 @@ class MindMap extends Base {
      let x2 = item.dir === 'left' ? item.left + item.width : item.left
      let y2 = item.top + item.height / 2
      let path = ''
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
      // 节点使用横线风格，需要额外渲染横线
      let nodeUseLineStylePath = ''
      if (this.mindMap.themeConfig.nodeUseLineStyle) {
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -1,142 +1,147 @@
-//  默认主题
-
-export default {
-  // 节点内边距
-  paddingX: 15,
-  paddingY: 5,
-  // 图片显示的最大宽度
-  imgMaxWidth: 100,
-  // 图片显示的最大高度
-  imgMaxHeight: 100,
-  // icon的大小
-  iconSize: 20,
-  // 连线的粗细
-  lineWidth: 1,
-  // 连线的颜色
-  lineColor: '#549688',
-  // 连线样式
-  lineDasharray: 'none',
-  // 连线风格
-  lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
-  // 概要连线的粗细
-  generalizationLineWidth: 1,
-  // 概要连线的颜色
-  generalizationLineColor: '#549688',
-  // 概要曲线距节点的距离
-  generalizationLineMargin: 0,
-  // 概要节点距节点的距离
-  generalizationNodeMargin: 20,
-  // 背景颜色
-  backgroundColor: '#fafafa',
-  // 背景图片
-  backgroundImage: 'none',
-  // 背景重复
-  backgroundRepeat: 'no-repeat',
-  // 节点使用横线样式
-  nodeUseLineStyle: false,
-  // 根节点样式
-  root: {
-    shape: 'rectangle',
-    fillColor: '#549688',
-    fontFamily: '微软雅黑, Microsoft YaHei',
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: 'bold',
-    fontStyle: 'normal',
-    lineHeight: 1.5,
-    borderColor: 'transparent',
-    borderWidth: 0,
-    borderDasharray: 'none',
-    borderRadius: 5,
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
-  },
-  // 二级节点样式
-  second: {
-    shape: 'rectangle',
-    marginX: 100,
-    marginY: 40,
-    fillColor: '#fff',
-    fontFamily: '微软雅黑, Microsoft YaHei',
-    color: '#565656',
-    fontSize: 16,
-    fontWeight: 'noraml',
-    fontStyle: 'normal',
-    lineHeight: 1.5,
-    borderColor: '#549688',
-    borderWidth: 1,
-    borderDasharray: 'none',
-    borderRadius: 5,
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
-  },
-  // 三级及以下节点样式
-  node: {
-    shape: 'rectangle',
-    marginX: 50,
-    marginY: 0,
-    fillColor: 'transparent',
-    fontFamily: '微软雅黑, Microsoft YaHei',
-    color: '#6a6d6c',
-    fontSize: 14,
-    fontWeight: 'noraml',
-    fontStyle: 'normal',
-    lineHeight: 1.5,
-    borderColor: 'transparent',
-    borderWidth: 0,
-    borderRadius: 5,
-    borderDasharray: 'none',
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
-  },
-  // 概要节点样式
-  generalization: {
-    shape: 'rectangle',
-    marginX: 100,
-    marginY: 40,
-    fillColor: '#fff',
-    fontFamily: '微软雅黑, Microsoft YaHei',
-    color: '#565656',
-    fontSize: 16,
-    fontWeight: 'noraml',
-    fontStyle: 'normal',
-    lineHeight: 1.5,
-    borderColor: '#549688',
-    borderWidth: 1,
-    borderDasharray: 'none',
-    borderRadius: 5,
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
-  }
-}
-
-// 支持激活样式的属性
-// 简单来说，会改变节点大小的都不支持在激活时设置，为了性能考虑，节点切换激活态时不会重新计算节点大小
-export const supportActiveStyle = [
-  'fillColor',
-  'color',
-  'fontWeight',
-  'fontStyle',
-  'borderColor',
-  'borderWidth',
-  'borderDasharray',
-  'borderRadius',
-  'textDecoration'
-]
-
+//  默认主题
+
+export default {
+  // 节点内边距
+  paddingX: 15,
+  paddingY: 5,
+  // 图片显示的最大宽度
+  imgMaxWidth: 100,
+  // 图片显示的最大高度
+  imgMaxHeight: 100,
+  // icon的大小
+  iconSize: 20,
+  // 连线的粗细
+  lineWidth: 1,
+  // 连线的颜色
+  lineColor: '#549688',
+  // 连线样式
+  lineDasharray: 'none',
+  // 连线风格
+  lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
+  // 概要连线的粗细
+  generalizationLineWidth: 1,
+  // 概要连线的颜色
+  generalizationLineColor: '#549688',
+  // 概要曲线距节点的距离
+  generalizationLineMargin: 0,
+  // 概要节点距节点的距离
+  generalizationNodeMargin: 20,
+  // 背景颜色
+  backgroundColor: '#fafafa',
+  // 背景图片
+  backgroundImage: 'none',
+  // 背景重复
+  backgroundRepeat: 'no-repeat',
+  // 设置背景图像的起始位置
+  backgroundPosition: 'center center',
+  // 设置背景图片大小
+  backgroundSize: 'cover',
+  // 节点使用横线样式
+  nodeUseLineStyle: false,
+  // 根节点样式
+  root: {
+    shape: 'rectangle',
+    fillColor: '#549688',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: 'transparent',
+    borderWidth: 0,
+    borderDasharray: 'none',
+    borderRadius: 5,
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  },
+  // 二级节点样式
+  second: {
+    shape: 'rectangle',
+    marginX: 100,
+    marginY: 40,
+    fillColor: '#fff',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#565656',
+    fontSize: 16,
+    fontWeight: 'noraml',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: '#549688',
+    borderWidth: 1,
+    borderDasharray: 'none',
+    borderRadius: 5,
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    shape: 'rectangle',
+    marginX: 50,
+    marginY: 0,
+    fillColor: 'transparent',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#6a6d6c',
+    fontSize: 14,
+    fontWeight: 'noraml',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: 'transparent',
+    borderWidth: 0,
+    borderRadius: 5,
+    borderDasharray: 'none',
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    shape: 'rectangle',
+    marginX: 100,
+    marginY: 40,
+    fillColor: '#fff',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#565656',
+    fontSize: 16,
+    fontWeight: 'noraml',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: '#549688',
+    borderWidth: 1,
+    borderDasharray: 'none',
+    borderRadius: 5,
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  }
+}
+
+// 支持激活样式的属性
+// 简单来说，会改变节点大小的都不支持在激活时设置，为了性能考虑，节点切换激活态时不会重新计算节点大小
+export const supportActiveStyle = [
+  'fillColor',
+  'color',
+  'fontWeight',
+  'fontStyle',
+  'borderColor',
+  'borderWidth',
+  'borderDasharray',
+  'borderRadius',
+  'textDecoration'
+]
+
+export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -224,3 +224,45 @@ export const asyncRun = (taskList, callback = () => {}) => {
  }
  loop()
 }
+
+// 角度转弧度
+export const degToRad = deg => {
+  return deg * (Math.PI / 180)
+}
+
+// 驼峰转连字符 
+export const camelCaseToHyphen = (str) => {
+  return str.replace(/([a-z])([A-Z])/g, (...args) => {
+    return args[1] + '-' + args[2].toLowerCase()
+  })
+}
+
+//计算节点的文本长宽
+let measureTextContext = null
+export const measureText = (text, { italic, bold, fontSize, fontFamily }) => {
+  const font = joinFontStr({
+    italic,
+    bold,
+    fontSize,
+    fontFamily
+  })
+  if (!measureTextContext) {
+    const canvas = document.createElement('canvas')
+    measureTextContext = canvas.getContext('2d')
+  }
+  measureTextContext.save()
+  measureTextContext.font = font
+  const {
+    width,
+    actualBoundingBoxAscent,
+    actualBoundingBoxDescent
+  } = measureTextContext.measureText(text)
+  measureTextContext.restore()
+  const height = actualBoundingBoxAscent + actualBoundingBoxDescent
+  return { width, height }
+}
+
+// 拼接font字符串
+export const joinFontStr = ({ italic, bold, fontSize, fontFamily }) => {
+  return `${italic ? 'italic ' : ''} ${bold ? 'bold ' : ''} ${fontSize}px ${fontFamily} `
+}
--- a/simple-mind-map/src/utils/simulateCSSBackgroundInCanvas.js
+++ b/simple-mind-map/src/utils/simulateCSSBackgroundInCanvas.js
@@ -0,0 +1,354 @@
+// 将以空格分隔的字符串值转换成成数字/单位/值数组
+const getNumberValueFromStr = value => {
+  let arr = String(value).split(/\s+/)
+  return arr.map(item => {
+    if (/^[\d.]+/.test(item)) {
+      // 数字+单位
+      let res = /^([\d.]+)(.*)$/.exec(item)
+      return [Number(res[1]), res[2]]
+    } else {
+      // 单个值
+      return item
+    }
+  })
+}
+
+// 缩放宽度
+const zoomWidth = (ratio, height) => {
+  // w / height = ratio
+  return ratio * height
+}
+
+// 缩放高度
+const zoomHeight = (ratio, width) => {
+  // width / h = ratio
+  return width / ratio
+}
+
+// 关键词到百分比值的映射
+const keyWordToPercentageMap = {
+  left: 0,
+  top: 0,
+  center: 50,
+  bottom: 100,
+  right: 100
+}
+
+// 模拟background-size
+const handleBackgroundSize = ({
+  backgroundSize,
+  drawOpt,
+  imageRatio,
+  canvasWidth,
+  canvasHeight,
+  canvasRatio
+}) => {
+  if (backgroundSize) {
+    // 将值转换成数组
+    let backgroundSizeValueArr = getNumberValueFromStr(backgroundSize)
+    // 两个值都为auto，那就相当于不设置
+    if (
+      backgroundSizeValueArr[0] === 'auto' &&
+      backgroundSizeValueArr[1] === 'auto'
+    ) {
+      return
+    }
+    // 值为cover
+    if (backgroundSizeValueArr[0] === 'cover') {
+      if (imageRatio > canvasRatio) {
+        // 图片的宽高比大于canvas的宽高比，那么图片高度缩放到和canvas的高度一致，宽度自适应
+        drawOpt.height = canvasHeight
+        drawOpt.width = zoomWidth(imageRatio, canvasHeight)
+      } else {
+        // 否则图片宽度缩放到和canvas的宽度一致，高度自适应
+        drawOpt.width = canvasWidth
+        drawOpt.height = zoomHeight(imageRatio, canvasWidth)
+      }
+      return
+    }
+    // 值为contain
+    if (backgroundSizeValueArr[0] === 'contain') {
+      if (imageRatio > canvasRatio) {
+        // 图片的宽高比大于canvas的宽高比，那么图片宽度缩放到和canvas的宽度一致，高度自适应
+        drawOpt.width = canvasWidth
+        drawOpt.height = zoomHeight(imageRatio, canvasWidth)
+      } else {
+        // 否则图片高度缩放到和canvas的高度一致，宽度自适应
+        drawOpt.height = canvasHeight
+        drawOpt.width = zoomWidth(imageRatio, canvasHeight)
+      }
+      return
+    }
+    // 图片宽度
+    let newNumberWidth = -1
+    if (backgroundSizeValueArr[0]) {
+      if (Array.isArray(backgroundSizeValueArr[0])) {
+        // 数字+单位类型
+        if (backgroundSizeValueArr[0][1] === '%') {
+          // %单位
+          drawOpt.width = (backgroundSizeValueArr[0][0] / 100) * canvasWidth
+          newNumberWidth = drawOpt.width
+        } else {
+          // 其他都认为是px单位
+          drawOpt.width = backgroundSizeValueArr[0][0]
+          newNumberWidth = backgroundSizeValueArr[0][0]
+        }
+      } else if (backgroundSizeValueArr[0] === 'auto') {
+        // auto类型，那么根据设置的新高度以图片原宽高比进行自适应
+        if (backgroundSizeValueArr[1]) {
+          if (backgroundSizeValueArr[1][1] === '%') {
+            // 高度为%单位
+            drawOpt.width = zoomWidth(
+              imageRatio,
+              (backgroundSizeValueArr[1][0] / 100) * canvasHeight
+            )
+          } else {
+            // 其他都认为是px单位
+            drawOpt.width = zoomWidth(imageRatio, backgroundSizeValueArr[1][0])
+          }
+        }
+      }
+    }
+    // 设置了图片高度
+    if (backgroundSizeValueArr[1] && Array.isArray(backgroundSizeValueArr[1])) {
+      // 数字+单位类型
+      if (backgroundSizeValueArr[1][1] === '%') {
+        // 高度为%单位
+        drawOpt.height = (backgroundSizeValueArr[1][0] / 100) * canvasHeight
+      } else {
+        // 其他都认为是px单位
+        drawOpt.height = backgroundSizeValueArr[1][0]
+      }
+    } else if (newNumberWidth !== -1) {
+      // 没有设置图片高度或者设置为auto，那么根据设置的新宽度以图片原宽高比进行自适应
+      drawOpt.height = zoomHeight(imageRatio, newNumberWidth)
+    }
+  }
+}
+
+// 模拟background-position
+const handleBackgroundPosition = ({
+  backgroundPosition,
+  drawOpt,
+  imgWidth,
+  imgHeight,
+  canvasWidth,
+  canvasHeight
+}) => {
+  if (backgroundPosition) {
+    // 将值转换成数组
+    let backgroundPositionValueArr = getNumberValueFromStr(backgroundPosition)
+    // 将关键词转为百分比
+    backgroundPositionValueArr = backgroundPositionValueArr.map(item => {
+      if (typeof item === 'string') {
+        return keyWordToPercentageMap[item] !== undefined
+          ? [keyWordToPercentageMap[item], '%']
+          : item
+      }
+      return item
+    })
+    if (Array.isArray(backgroundPositionValueArr[0])) {
+      if (backgroundPositionValueArr.length === 1) {
+        // 如果只设置了一个值，第二个默认为50%
+        backgroundPositionValueArr.push([50, '%'])
+      }
+      // 水平位置
+      if (backgroundPositionValueArr[0][1] === '%') {
+        // 单位为%
+        let canvasX = (backgroundPositionValueArr[0][0] / 100) * canvasWidth
+        let imgX = (backgroundPositionValueArr[0][0] / 100) * imgWidth
+        // 计算差值
+        drawOpt.x = canvasX - imgX
+      } else {
+        // 其他单位默认都为px
+        drawOpt.x = backgroundPositionValueArr[0][0]
+      }
+      // 垂直位置
+      if (backgroundPositionValueArr[1][1] === '%') {
+        // 单位为%
+        let canvasY = (backgroundPositionValueArr[1][0] / 100) * canvasHeight
+        let imgY = (backgroundPositionValueArr[1][0] / 100) * imgHeight
+        // 计算差值
+        drawOpt.y = canvasY - imgY
+      } else {
+        // 其他单位默认都为px
+        drawOpt.y = backgroundPositionValueArr[1][0]
+      }
+    }
+  }
+}
+
+// 模拟background-repeat
+const handleBackgroundRepeat = ({
+  ctx,
+  image,
+  backgroundRepeat,
+  drawOpt,
+  imgWidth,
+  imgHeight,
+  canvasWidth,
+  canvasHeight
+}) => {
+  if (backgroundRepeat) {
+    // 保存在handleBackgroundPosition中计算出来的x、y
+    let ox = drawOpt.x
+    let oy = drawOpt.y
+    // 计算ox和oy能平铺的图片数量
+    let oxRepeatNum = Math.ceil(ox / imgWidth)
+    let oyRepeatNum = Math.ceil(oy / imgHeight)
+    // 计算ox和oy第一张图片的位置
+    let oxRepeatX = ox - oxRepeatNum * imgWidth
+    let oxRepeatY = oy - oyRepeatNum * imgHeight
+    // 将值转换成数组
+    let backgroundRepeatValueArr = getNumberValueFromStr(backgroundRepeat)
+    // 不处理
+    if (
+      backgroundRepeatValueArr[0] === 'no-repeat' ||
+      (imgWidth >= canvasWidth && imgHeight >= canvasHeight)
+    ) {
+      return
+    }
+    // 水平平铺
+    if (backgroundRepeatValueArr[0] === 'repeat-x') {
+      if (canvasWidth > imgWidth) {
+        let x = oxRepeatX
+        while (x < canvasWidth) {
+          drawImage(ctx, image, {
+            ...drawOpt,
+            x
+          })
+          x += imgWidth
+        }
+        return true
+      }
+    }
+    // 垂直平铺
+    if (backgroundRepeatValueArr[0] === 'repeat-y') {
+      if (canvasHeight > imgHeight) {
+        let y = oxRepeatY
+        while (y < canvasHeight) {
+          drawImage(ctx, image, {
+            ...drawOpt,
+            y
+          })
+          y += imgHeight
+        }
+        return true
+      }
+    }
+    // 平铺
+    if (backgroundRepeatValueArr[0] === 'repeat') {
+      let x = oxRepeatX
+      while (x < canvasWidth) {
+        if (canvasHeight > imgHeight) {
+          let y = oxRepeatY
+          while (y < canvasHeight) {
+            drawImage(ctx, image, {
+              ...drawOpt,
+              x,
+              y
+            })
+            y += imgHeight
+          }
+        }
+        x += imgWidth
+      }
+      return true
+    }
+  }
+}
+
+// 根据参数绘制图片
+const drawImage = (ctx, image, drawOpt) => {
+  ctx.drawImage(
+    image,
+    drawOpt.sx,
+    drawOpt.sy,
+    drawOpt.swidth,
+    drawOpt.sheight,
+    drawOpt.x,
+    drawOpt.y,
+    drawOpt.width,
+    drawOpt.height
+  )
+}
+
+const drawBackgroundImageToCanvas = (
+  ctx,
+  width,
+  height,
+  img,
+  { backgroundSize, backgroundPosition, backgroundRepeat },
+  callback = () => {}
+) => {
+  // 画布的长宽比
+  let canvasRatio = width / height
+  // 加载图片
+  let image = new Image()
+  image.src = img
+  image.onload = () => {
+    // 图片的宽度及长宽比
+    let imgWidth = image.width
+    let imgHeight = image.height
+    let imageRatio = imgWidth / imgHeight
+    // 绘制图片
+    // drawImage方法的参数值
+    let drawOpt = {
+      sx: 0,
+      sy: 0,
+      swidth: imgWidth,
+      sheight: imgHeight,
+      x: 0,
+      y: 0,
+      width: imgWidth,
+      height: imgHeight
+    }
+    // 模拟background-size
+    handleBackgroundSize({
+      backgroundSize,
+      drawOpt,
+      imageRatio,
+      canvasWidth: width,
+      canvasHeight: height,
+      canvasRatio
+    })
+
+    // 模拟background-position
+    handleBackgroundPosition({
+      backgroundPosition,
+      drawOpt,
+      imgWidth: drawOpt.width,
+      imgHeight: drawOpt.height,
+      imageRatio,
+      canvasWidth: width,
+      canvasHeight: height,
+      canvasRatio
+    })
+
+    // 模拟background-repeat
+    let notNeedDraw = handleBackgroundRepeat({
+      ctx,
+      image,
+      backgroundRepeat,
+      drawOpt,
+      imgWidth: drawOpt.width,
+      imgHeight: drawOpt.height,
+      imageRatio,
+      canvasWidth: width,
+      canvasHeight: height,
+      canvasRatio
+    })
+
+    //  绘制图片
+    if (!notNeedDraw) {
+      drawImage(ctx, image, drawOpt)
+    }
+
+    callback()
+  }
+  image.onerror = e => {
+    callback(e)
+  }
+}
+
+export default drawBackgroundImageToCanvas
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,6 +11,7 @@
        "@toast-ui/editor": "^3.1.5",
        "core-js": "^3.6.5",
        "element-ui": "^2.15.1",
+        "highlight.js": "^10.7.3",
        "v-viewer": "^1.6.4",
        "vue": "^2.6.11",
        "vue-i18n": "^8.27.2",
@@ -23,10 +24,13 @@
        "@vue/cli-plugin-eslint": "^4.5.0",
        "@vue/cli-service": "^4.5.0",
        "babel-eslint": "^10.1.0",
+        "chokidar": "^3.5.3",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "less": "^3.12.2",
        "less-loader": "^7.1.0",
+        "markdown-it": "^13.0.1",
+        "markdown-it-checkbox": "^1.1.0",
        "prettier": "^1.19.1",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^4.44.2"
@@ -3521,7 +3525,6 @@
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
      "dev": true,
-      "optional": true,
      "engines": {
        "node": ">=8"
      }
@@ -4135,7 +4138,6 @@
          "url": "https://paulmillr.com/funding/"
        }
      ],
-      "optional": true,
      "dependencies": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
@@ -4157,7 +4159,6 @@
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "fill-range": "^7.0.1"
      },
@@ -4170,7 +4171,6 @@
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@@ -4183,7 +4183,6 @@
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "is-glob": "^4.0.1"
      },
@@ -4196,7 +4195,6 @@
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
      "dev": true,
-      "optional": true,
      "engines": {
        "node": ">=0.12.0"
      }
@@ -4206,7 +4204,6 @@
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "is-number": "^7.0.0"
      },
@@ -7846,7 +7843,6 @@
      "version": "10.7.3",
      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-      "dev": true,
      "engines": {
        "node": "*"
      }
@@ -8604,7 +8600,6 @@
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "binary-extensions": "^2.0.0"
      },
@@ -9334,6 +9329,15 @@
      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
      "dev": true
    },
+    "node_modules/linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dev": true,
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
    "node_modules/loader-fs-cache": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
@@ -9554,6 +9558,49 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/markdown-it": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
+      "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/markdown-it-checkbox": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-checkbox/-/markdown-it-checkbox-1.1.0.tgz",
+      "integrity": "sha512-NkZVjnXo5G+cLNdi7DPZxICypBuxFE9F8sx3YGMZn+Cfizr8EZ/1TFUKl7ZnefF6cr1aFHbnQ5iA3rc4cp7EyA==",
+      "dev": true,
+      "dependencies": {
+        "underscore": "^1.8.2"
+      }
+    },
+    "node_modules/markdown-it/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
    "node_modules/md5.js": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -9571,6 +9618,12 @@
      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
      "dev": true
    },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "dev": true
+    },
    "node_modules/media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -12049,7 +12102,6 @@
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "picomatch": "^2.2.1"
      },
@@ -14266,6 +14318,12 @@
      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
      "dev": true
    },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
    "node_modules/uglify-js": {
      "version": "3.4.10",
      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -14303,6 +14361,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/underscore": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
+      "dev": true
+    },
    "node_modules/unicode-canonical-property-names-ecmascript": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -17842,6 +17906,7 @@
      "integrity": "sha512-VCNRiAt2P/bLo09rYt3DLe6xXUMlhJwrvU18Ddd/lYJgC7s8+wvhgYs+MTx4OiAXdu58drGwSBO9SPx7C6J82Q==",
      "dev": true,
      "requires": {
+        "@babel/core": "^7.11.0",
        "@babel/helper-compilation-targets": "^7.9.6",
        "@babel/helper-module-imports": "^7.8.3",
        "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -17854,6 +17919,7 @@
        "@vue/babel-plugin-jsx": "^1.0.3",
        "@vue/babel-preset-jsx": "^1.2.4",
        "babel-plugin-dynamic-import-node": "^2.3.3",
+        "core-js": "^3.6.5",
        "core-js-compat": "^3.6.5",
        "semver": "^6.1.0"
      }
@@ -18871,8 +18937,7 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
-      "optional": true
+      "dev": true
    },
    "bindings": {
      "version": "1.5.0",
@@ -19382,7 +19447,6 @@
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
      "dev": true,
-      "optional": true,
      "requires": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
@@ -19399,7 +19463,6 @@
          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
          "dev": true,
-          "optional": true,
          "requires": {
            "fill-range": "^7.0.1"
          }
@@ -19409,7 +19472,6 @@
          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
          "dev": true,
-          "optional": true,
          "requires": {
            "to-regex-range": "^5.0.1"
          }
@@ -19419,7 +19481,6 @@
          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
          "dev": true,
-          "optional": true,
          "requires": {
            "is-glob": "^4.0.1"
          }
@@ -19428,15 +19489,13 @@
          "version": "7.0.0",
          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "to-regex-range": {
          "version": "5.0.1",
          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
          "dev": true,
-          "optional": true,
          "requires": {
            "is-number": "^7.0.0"
          }
@@ -22289,8 +22348,7 @@
    "highlight.js": {
      "version": "10.7.3",
      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
-      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-      "dev": true
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
    },
    "hmac-drbg": {
      "version": "1.0.1",
@@ -22870,7 +22928,6 @@
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
      "dev": true,
-      "optional": true,
      "requires": {
        "binary-extensions": "^2.0.0"
      }
@@ -23414,6 +23471,15 @@
      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
      "dev": true
    },
+    "linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dev": true,
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
    "loader-fs-cache": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
@@ -23593,6 +23659,42 @@
        "object-visit": "^1.0.0"
      }
    },
+    "markdown-it": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
+      "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+          "dev": true
+        },
+        "entities": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+          "dev": true
+        }
+      }
+    },
+    "markdown-it-checkbox": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-checkbox/-/markdown-it-checkbox-1.1.0.tgz",
+      "integrity": "sha512-NkZVjnXo5G+cLNdi7DPZxICypBuxFE9F8sx3YGMZn+Cfizr8EZ/1TFUKl7ZnefF6cr1aFHbnQ5iA3rc4cp7EyA==",
+      "dev": true,
+      "requires": {
+        "underscore": "^1.8.2"
+      }
+    },
    "md5.js": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -23610,6 +23712,12 @@
      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
      "dev": true
    },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "dev": true
+    },
    "media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -25678,7 +25786,6 @@
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
      "dev": true,
-      "optional": true,
      "requires": {
        "picomatch": "^2.2.1"
      }
@@ -27502,6 +27609,12 @@
      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
      "dev": true
    },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
    "uglify-js": {
      "version": "3.4.10",
      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -27532,6 +27645,12 @@
        "which-boxed-primitive": "^1.0.2"
      }
    },
+    "underscore": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
+      "dev": true
+    },
    "unicode-canonical-property-names-ecmascript": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -6,13 +6,16 @@
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && node ../copy.js",
    "lint": "vue-cli-service lint",
-    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/index.js --dest ../simple-mind-map/dist",
-    "format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*"
+    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/full.js --dest ../simple-mind-map/dist",
+    "format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*",
+    "buildDoc": "node ./scripts/buildDoc.js",
+    "autoBuildDoc": "node ./scripts/autoBuildDoc.js"
  },
  "dependencies": {
    "@toast-ui/editor": "^3.1.5",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.1",
+    "highlight.js": "^10.7.3",
    "v-viewer": "^1.6.4",
    "vue": "^2.6.11",
    "vue-i18n": "^8.27.2",
@@ -25,10 +28,13 @@
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "babel-eslint": "^10.1.0",
+    "chokidar": "^3.5.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
+    "markdown-it": "^13.0.1",
+    "markdown-it-checkbox": "^1.1.0",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.2"
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -4,6 +4,7 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="./dist/logo.png">
    <title>一个简单的web思维导图实现</title>
  </head>
  <body>
--- a/web/public/logo.png
+++ b/web/public/logo.png
--- a/web/scripts/autoBuildDoc.js
+++ b/web/scripts/autoBuildDoc.js
@@ -0,0 +1,38 @@
+const chokidar = require('chokidar')
+const path = require('path')
+const fs = require('fs')
+const { exec } = require('node:child_process')
+const { transformMdToVue } = require('./transformMdToVue')
+
+const reBuildAll = () => {
+  exec(
+    'node ./buildDoc.js',
+    {
+      cwd: path.resolve(__dirname)
+    },
+    (error, msg) => {
+      console.log(error, msg)
+    }
+  )
+}
+
+const buildOne = file => {
+  let content = fs.readFileSync(file, 'utf-8')
+  let doc = transformMdToVue(content)
+  let destPath = path.join(path.dirname(file), './index.vue')
+  fs.writeFileSync(destPath, doc)
+}
+
+chokidar
+  .watch(path.join(__dirname, '../src/pages/Doc/'), {
+    ignoreInitial: true
+  })
+  .on('all', (event, file) => {
+    if (/\.md$/.test(file)) {
+      if (event === 'change') {
+        buildOne(file)
+      } else {
+        reBuildAll()
+      }
+    }
+  })
--- a/web/scripts/buildDoc.js
+++ b/web/scripts/buildDoc.js
@@ -0,0 +1,85 @@
+// 编译文档
+const path = require('path')
+const fs = require('fs')
+const { transformMdToVue } = require('./transformMdToVue')
+
+// 文档语言种类
+let langList = ['zh', 'en']
+
+// 开始转换
+const transform = (dir, routerList) => {
+  let dirs = fs.readdirSync(dir)
+  dirs.forEach(item => {
+    let cur = path.join(dir, item)
+    if (fs.statSync(cur).isDirectory()) {
+      compilerDir(cur, item, routerList)
+    }
+  })
+}
+
+// 编译某种语言下的文档
+const compilerDir = (dir, dirName, routerList) => {
+  let files = fs.readdirSync(dir)
+  files.forEach(file => {
+    if (file.endsWith('.md')) {
+      compilerFile(dir, file, dirName, routerList)
+    }
+  })
+}
+
+// 编译具体的文档
+const compilerFile = (dir, file, dirName, routerList) => {
+  let filePath = path.join(dir, file)
+  let destPath = path.join(dir, './index.vue')
+  let content = fs.readFileSync(filePath, 'utf-8')
+  let title = /(^|\n\r)\s*#\s+([^\n\r]+)/g.exec(content)
+  if (title && title[2]) {
+    addRouter(dirName, routerList, title[2])
+  }
+  let doc = transformMdToVue(content)
+  fs.writeFileSync(destPath, doc)
+}
+
+// 收集文档路由
+const addRouter = (item, routerList, title) => {
+  routerList.push({
+    path: item,
+    title
+  })
+}
+
+// 创建路由
+const createRouter = () => {
+  let content = `
+        export default ${JSON.stringify(
+          routerTypeList.map(item => {
+            return {
+              lang: item.lang,
+              children: item.routerList
+            }
+          })
+        )}
+    `
+  fs.writeFileSync(
+    path.join(__dirname, '../src/pages/Doc/routerList.js'),
+    content
+  )
+}
+
+// 创建目录列表
+const createCatalogList = () => {}
+
+// 开始编译
+let routerTypeList = []
+langList.forEach(lang => {
+  let dir = path.join(__dirname, '../src/pages/Doc/', `./${lang}/`)
+  let routerList = []
+  transform(dir, routerList)
+  routerTypeList.push({
+    lang,
+    routerList
+  })
+})
+// 创建路由
+createRouter()
+console.log('编译完成')
--- a/web/scripts/transformMdToVue.js
+++ b/web/scripts/transformMdToVue.js
@@ -0,0 +1,31 @@
+const path = require('path')
+const fs = require('fs')
+const hljs = require('highlight.js')
+const md = require('markdown-it')({
+  highlight: function(str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return (
+          '<pre class="hljs"><code>' +
+          hljs.highlight(str, {
+            language: lang, 
+            ignoreIllegals: true
+          }).value +
+          '</code></pre>'
+        )
+      } catch (__) {}
+    }
+
+    return (
+      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
+    )
+  }
+}).use(require('markdown-it-checkbox'))
+
+const templatePath = path.join(__dirname, '../src/pages/Doc/Template.vue')
+
+exports.transformMdToVue = (content) => {
+    let result = md.render(content)
+    let template = fs.readFileSync(templatePath, 'utf-8')
+    return template.replace('$$$$', result)
+}
--- a/web/src/assets/icon-font/demo_index.html
+++ b/web/src/assets/icon-font/demo_index.html
@@ -54,6 +54,66 @@
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6f8;</span>
+                <div class="name">背景颜色</div>
+                <div class="code-name">&amp;#xe6f8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">清除</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c6;</span>
+                <div class="name">case</div>
+                <div class="code-name">&amp;#xe6c6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeb99;</span>
+                <div class="name">形状-文字</div>
+                <div class="code-name">&amp;#xeb99;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec83;</span>
+                <div class="name">字体加粗</div>
+                <div class="code-name">&amp;#xec83;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec85;</span>
+                <div class="name">字体下划线</div>
+                <div class="code-name">&amp;#xec85;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec86;</span>
+                <div class="name">字体斜体</div>
+                <div class="code-name">&amp;#xec86;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">删除线</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe854;</span>
+                <div class="name">字体颜色</div>
+                <div class="code-name">&amp;#xe854;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64f;</span>
+                <div class="name">github</div>
+                <div class="code-name">&amp;#xe64f;</div>
+              </li>
+          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">选择</div>
@@ -342,9 +402,9 @@
 <pre><code class="language-css"
 >@font-face {
  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1668512547595') format('woff2'),
-       url('iconfont.woff?t=1668512547595') format('woff'),
-       url('iconfont.ttf?t=1668512547595') format('truetype');
+  src: url('iconfont.woff2?t=1677478278322') format('woff2'),
+       url('iconfont.woff?t=1677478278322') format('woff'),
+       url('iconfont.ttf?t=1677478278322') format('truetype');
 }
 </code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -370,6 +430,96 @@
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
+          <li class="dib">
+            <span class="icon iconfont iconbeijingyanse"></span>
+            <div class="name">
+              背景颜色
+            </div>
+            <div class="code-name">.iconbeijingyanse
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconqingchu"></span>
+            <div class="name">
+              清除
+            </div>
+            <div class="code-name">.iconqingchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconcase"></span>
+            <div class="name">
+              case
+            </div>
+            <div class="code-name">.iconcase
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxingzhuang-wenzi"></span>
+            <div class="name">
+              形状-文字
+            </div>
+            <div class="code-name">.iconxingzhuang-wenzi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzitijiacu"></span>
+            <div class="name">
+              字体加粗
+            </div>
+            <div class="code-name">.iconzitijiacu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzitixiahuaxian"></span>
+            <div class="name">
+              字体下划线
+            </div>
+            <div class="code-name">.iconzitixiahuaxian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzitixieti"></span>
+            <div class="name">
+              字体斜体
+            </div>
+            <div class="code-name">.iconzitixieti
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshanchuxian"></span>
+            <div class="name">
+              删除线
+            </div>
+            <div class="code-name">.iconshanchuxian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzitiyanse"></span>
+            <div class="name">
+              字体颜色
+            </div>
+            <div class="code-name">.iconzitiyanse
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icongithub"></span>
+            <div class="name">
+              github
+            </div>
+            <div class="code-name">.icongithub
+            </div>
+          </li>
+          
          <li class="dib">
            <span class="icon iconfont iconchoose1"></span>
            <div class="name">
@@ -802,6 +952,86 @@
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconbeijingyanse"></use>
+                </svg>
+                <div class="name">背景颜色</div>
+                <div class="code-name">#iconbeijingyanse</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconqingchu"></use>
+                </svg>
+                <div class="name">清除</div>
+                <div class="code-name">#iconqingchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconcase"></use>
+                </svg>
+                <div class="name">case</div>
+                <div class="code-name">#iconcase</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxingzhuang-wenzi"></use>
+                </svg>
+                <div class="name">形状-文字</div>
+                <div class="code-name">#iconxingzhuang-wenzi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzitijiacu"></use>
+                </svg>
+                <div class="name">字体加粗</div>
+                <div class="code-name">#iconzitijiacu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzitixiahuaxian"></use>
+                </svg>
+                <div class="name">字体下划线</div>
+                <div class="code-name">#iconzitixiahuaxian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzitixieti"></use>
+                </svg>
+                <div class="name">字体斜体</div>
+                <div class="code-name">#iconzitixieti</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshanchuxian"></use>
+                </svg>
+                <div class="name">删除线</div>
+                <div class="code-name">#iconshanchuxian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzitiyanse"></use>
+                </svg>
+                <div class="name">字体颜色</div>
+                <div class="code-name">#iconzitiyanse</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icongithub"></use>
+                </svg>
+                <div class="name">github</div>
+                <div class="code-name">#icongithub</div>
+            </li>
+          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchoose1"></use>
--- a/web/src/assets/icon-font/iconfont.css
+++ b/web/src/assets/icon-font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1668512547595') format('woff2'),
-       url('iconfont.woff?t=1668512547595') format('woff'),
-       url('iconfont.ttf?t=1668512547595') format('truetype');
+  src: url('iconfont.woff2?t=1677478278322') format('woff2'),
+       url('iconfont.woff?t=1677478278322') format('woff'),
+       url('iconfont.ttf?t=1677478278322') format('truetype');
 }

 .iconfont {
@@ -13,6 +13,46 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.iconbeijingyanse:before {
+  content: "\e6f8";
+}
+
+.iconqingchu:before {
+  content: "\e605";
+}
+
+.iconcase:before {
+  content: "\e6c6";
+}
+
+.iconxingzhuang-wenzi:before {
+  content: "\eb99";
+}
+
+.iconzitijiacu:before {
+  content: "\ec83";
+}
+
+.iconzitixiahuaxian:before {
+  content: "\ec85";
+}
+
+.iconzitixieti:before {
+  content: "\ec86";
+}
+
+.iconshanchuxian:before {
+  content: "\e612";
+}
+
+.iconzitiyanse:before {
+  content: "\e854";
+}
+
+.icongithub:before {
+  content: "\e64f";
+}
+
 .iconchoose1:before {
  content: "\e6c5";
 }
--- a/web/src/assets/icon-font/iconfont.js
+++ b/web/src/assets/icon-font/iconfont.js
--- a/web/src/assets/icon-font/iconfont.json
+++ b/web/src/assets/icon-font/iconfont.json
@@ -5,6 +5,76 @@
  "css_prefix_text": "icon",
  "description": "思维导图",
  "glyphs": [
+    {
+      "icon_id": "1790495",
+      "name": "背景颜色",
+      "font_class": "beijingyanse",
+      "unicode": "e6f8",
+      "unicode_decimal": 59128
+    },
+    {
+      "icon_id": "11321310",
+      "name": "清除",
+      "font_class": "qingchu",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "586787",
+      "name": "case",
+      "font_class": "case",
+      "unicode": "e6c6",
+      "unicode_decimal": 59078
+    },
+    {
+      "icon_id": "4354254",
+      "name": "形状-文字",
+      "font_class": "xingzhuang-wenzi",
+      "unicode": "eb99",
+      "unicode_decimal": 60313
+    },
+    {
+      "icon_id": "6337466",
+      "name": "字体加粗",
+      "font_class": "zitijiacu",
+      "unicode": "ec83",
+      "unicode_decimal": 60547
+    },
+    {
+      "icon_id": "6337470",
+      "name": "字体下划线",
+      "font_class": "zitixiahuaxian",
+      "unicode": "ec85",
+      "unicode_decimal": 60549
+    },
+    {
+      "icon_id": "6337471",
+      "name": "字体斜体",
+      "font_class": "zitixieti",
+      "unicode": "ec86",
+      "unicode_decimal": 60550
+    },
+    {
+      "icon_id": "11975179",
+      "name": "删除线",
+      "font_class": "shanchuxian",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "34198316",
+      "name": "字体颜色",
+      "font_class": "zitiyanse",
+      "unicode": "e854",
+      "unicode_decimal": 59476
+    },
+    {
+      "icon_id": "8760187",
+      "name": "github",
+      "font_class": "github",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
    {
      "icon_id": "1009019",
      "name": "选择",
--- a/web/src/assets/icon-font/iconfont.ttf
+++ b/web/src/assets/icon-font/iconfont.ttf
--- a/web/src/assets/icon-font/iconfont.woff
+++ b/web/src/assets/icon-font/iconfont.woff
--- a/web/src/assets/icon-font/iconfont.woff2
+++ b/web/src/assets/icon-font/iconfont.woff2
--- a/web/src/assets/img/logo.png
+++ b/web/src/assets/img/logo.png
--- a/web/src/config/en.js
+++ b/web/src/config/en.js
@@ -166,6 +166,22 @@ export const backgroundPositionList = [
  }
 ]

+// 背景图片大小
+export const backgroundSizeList = [
+  {
+    name: 'Auto',
+    value: 'auto'
+  },
+  {
+    name: 'Cover',
+    value: 'cover'
+  },
+  {
+    name: 'Contain',
+    value: 'contain'
+  }
+]
+
 // 快捷键列表
 export const shortcutKeyList = [
  {
--- a/web/src/config/index.js
+++ b/web/src/config/index.js
@@ -14,7 +14,8 @@ import {
  backgroundPositionList as backgroundPositionListZh,
  shortcutKeyList as shortcutKeyListZh,
  shapeList as shapeListZh,
-  sidebarTriggerList as sidebarTriggerListZh
+  sidebarTriggerList as sidebarTriggerListZh,
+  backgroundSizeList as backgroundSizeListZh
 } from './zh'
 import {
  fontFamilyList as fontFamilyListEn,
@@ -24,7 +25,8 @@ import {
  backgroundPositionList as backgroundPositionListEn,
  shortcutKeyList as shortcutKeyListEn,
  shapeList as shapeListEn,
-  sidebarTriggerList as sidebarTriggerListEn
+  sidebarTriggerList as sidebarTriggerListEn,
+  backgroundSizeList as backgroundSizeListEn
 } from './en'

 const fontFamilyList = {
@@ -52,6 +54,11 @@ const backgroundPositionList = {
  en: backgroundPositionListEn
 }

+const backgroundSizeList = {
+  zh: backgroundSizeListZh,
+  en: backgroundSizeListEn
+}
+
 const shortcutKeyList = {
  zh: shortcutKeyListZh,
  en: shortcutKeyListEn
@@ -81,6 +88,7 @@ export {
  lineStyleList,
  backgroundRepeatList,
  backgroundPositionList,
+  backgroundSizeList,
  shortcutKeyList,
  shapeList,
  sidebarTriggerList
--- a/web/src/config/zh.js
+++ b/web/src/config/zh.js
@@ -221,6 +221,22 @@ export const backgroundPositionList = [
  }
 ]

+// 背景图片大小
+export const backgroundSizeList = [
+  {
+    name: '自动',
+    value: 'auto'
+  },
+  {
+    name: '覆盖',
+    value: 'cover'
+  },
+  {
+    name: '保持',
+    value: 'contain'
+  }
+]
+
 // 数据存储
 export const store = {
  sidebarZIndex: 1 //侧边栏zIndex
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -5,6 +5,8 @@ export default {
    color: 'Color',
    image: 'Image',
    imageRepeat: 'Image repeat',
+    imagePosition: 'Image position',
+    imageSize: 'Image size',
    line: 'Line',
    width: 'Width',
    style: 'Style',
@@ -20,7 +22,20 @@ export default {
    level2Node: 'Level2 node',
    belowLevel2Node: 'Below level2 node',
    nodeBorderType: 'Node border style',
-    nodeUseLineStyle: 'Use only has bottom border style'
+    nodeUseLineStyle: 'Use only has bottom border style',
+    otherConfig: 'Other config',
+    enableFreeDrag: 'Enable node free drag',
+    watermark: 'Watermark',
+    showWatermark: 'Is show watermark',
+    watermarkDefaultText: 'Watermark text',
+    watermarkText: 'Watermark text',
+    watermarkTextColor: 'Text color',
+    watermarkLineSpacing: 'Line spacing',
+    watermarkTextSpacing: 'Text spacing',
+    watermarkAngle: 'Angle',
+    watermarkTextOpacity: 'Text opacity',
+    watermarkTextFontSize: 'Font size',
+    isEnableNodeRichText: 'Enable node rich text editing'
  },
  color: {
    moreColor: 'More color'
@@ -65,7 +80,13 @@ export default {
    imageFile: 'Image file',
    svgFile: 'svg file',
    pdfFile: 'pdf file',
-    tips: 'tips：.smm and .json file can be import'
+    tips: 'tips: .smm and .json file can be import',
+    domToImage: 'Whether to convert rich text nodes in svg into pictures',
+    pngTips: 'tips: Exporting pictures in rich text mode is time-consuming. It is recommended to export to svg format',
+    svgTips: 'tips: Exporting pictures in rich text mode is time-consuming',
+    transformingDomToImages: 'Converting nodes: ',
+    notifyTitle: 'Info',
+    notifyMessage: 'If the download is not triggered, check whether it is blocked by the browser'
  },
  fullscreen: {
    fullscreenShow: 'Full screen show',
@@ -164,5 +185,9 @@ export default {
    import: 'Import',
    export: 'Export',
    shortcutKey: 'Shortcut key'
+  },
+  edit: {
+    newFeatureNoticeTitle: 'New feature reminder',
+    newFeatureNoticeMessage: 'This update supports node rich text editing, But there are some defects, The most important impact is that the time to export the image is proportional to the number of nodes, Therefore, if you are more dependent on export requirements, you can use【Base style】-【Other config】-【Enable node rich text editing】Set to turn off rich text editing mode.'
  }
 }
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -5,6 +5,8 @@ export default {
    color: '颜色',
    image: '图片',
    imageRepeat: '图片重复',
+    imagePosition: '图片位置',
+    imageSize: '图片大小',
    line: '连线',
    width: '粗细',
    style: '风格',
@@ -20,7 +22,20 @@ export default {
    level2Node: '二级节点',
    belowLevel2Node: '三级及以下节点',
    nodeBorderType: '节点边框风格',
-    nodeUseLineStyle: '是否使用只有底边框的风格'
+    nodeUseLineStyle: '是否使用只有底边框的风格',
+    otherConfig: '其他配置',
+    enableFreeDrag: '是否开启节点自由拖拽',
+    watermark: '水印',
+    showWatermark: '是否显示水印',
+    watermarkDefaultText: '水印文字',
+    watermarkText: '水印文字',
+    watermarkTextColor: '文字颜色',
+    watermarkLineSpacing: '水印行间距',
+    watermarkTextSpacing: '水印文字间距',
+    watermarkAngle: '旋转角度',
+    watermarkTextOpacity: '文字透明度',
+    watermarkTextFontSize: '文字字号',
+    isEnableNodeRichText: '是否开启节点富文本编辑'
  },
  color: {
    moreColor: '更多颜色'
@@ -65,7 +80,13 @@ export default {
    imageFile: '图片文件',
    svgFile: 'svg文件',
    pdfFile: 'pdf文件',
-    tips: 'tips：.smm和.json文件可用于导入'
+    tips: 'tips：.smm和.json文件可用于导入',
+    domToImage: '是否将svg中富文本节点转换成图片',
+    pngTips: 'tips：富文本模式导出图片非常耗时，建议导出为svg格式',
+    svgTips: 'tips：富文本模式导出图片非常耗时',
+    transformingDomToImages: '正在转换节点：',
+    notifyTitle: '消息',
+    notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了'
  },
  fullscreen: {
    fullscreenShow: '全屏查看',
@@ -164,5 +185,9 @@ export default {
    import: '导入',
    export: '导出',
    shortcutKey: '快捷键'
+  },
+  edit: {
+    newFeatureNoticeTitle: '新特性提醒',
+    newFeatureNoticeMessage: '本次更新支持了节点富文本编辑，但是存在一定缺陷，最主要的影响是导出为图片的时间和节点数量成正比，所以对导出需求比较依赖的话可以通过【基础样式】-【其他配置】-【是否开启节点富文本编辑】设置关掉富文本编辑模式。'
  }
 }
--- a/web/src/pages/Doc/Index.vue
+++ b/web/src/pages/Doc/Index.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="docContainer">
+    <Header></Header>
+    <div class="content">
+      <Sidebar></Sidebar>
+      <div class="doc" ref="doc" id="doc" @scroll="onScroll">
+        <router-view></router-view>
+      </div>
+      <CatalogBar :scrollTop="scrollTop" @scroll="doScroll"></CatalogBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from './components/Header.vue'
+import Sidebar from './components/Sidebar.vue'
+import CatalogBar from './components/CatalogBar.vue'
+import 'highlight.js/styles/atom-one-dark.css'
+
+export default {
+  components: {
+    Header,
+    Sidebar,
+    CatalogBar
+  },
+  data () {
+    return {
+      scrollTop: 0,
+    }
+  },
+  methods: {
+    doScroll(top) {
+      this.$nextTick(() => {
+        try {
+          this.$refs.doc.scrollTop = top
+        } catch (error) {
+          console.log(error)
+        }
+      })
+    },
+
+    onScroll() {
+      this.scrollTop = this.$refs.doc.scrollTop
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.docContainer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: Quotes, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+
+  .content {
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+
+    .doc {
+      overflow: auto;
+      flex-grow: 1;
+      font-weight: 400;
+      color: #213547;
+      font-size: 16px;
+      -webkit-font-smoothing: antialiased;
+      line-height: 1.7;
+      padding: 30px;
+
+      h1 {
+        margin: 30px 0;
+        font-size: 38px;
+        line-height: 1.4;
+      }
+
+      h2 {
+        margin: 20px 0;
+        border-top: 1px solid rgba(60, 60, 60, 0.12);
+        font-size: 24px;
+        padding-top: 10px;
+      }
+
+      h3 {
+        font-size: 19px;
+        margin: 10px 0;
+      }
+
+      p {
+        margin-bottom: 20px;
+      }
+
+      a {
+        font-weight: 500;
+        text-decoration: none;
+        color: #42b883;
+        transition: color 0.25s;
+
+        &:hover {
+          color: #33a06f;
+        }
+      }
+
+      pre {
+        margin-bottom: 20px;
+        border-radius: 5px;
+        font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+
+        code {
+          font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+        }
+      }
+
+      :not(pre) > code {
+        background-color: #f1f1f1;
+        padding: 0.15em 0.5em;
+        border-radius: 4px;
+        color: #476582;
+        transition: color 0.5s, background-color 0.5s;
+        font-family: Quotes, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+          Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
+          'Helvetica Neue', sans-serif;
+      }
+
+      input[type='checkbox'] {
+        margin-right: 5px;
+      }
+
+      ul {
+        list-style: none;
+        padding-left: 1.25rem;
+
+        > li {
+          position: relative;
+          margin: 1px 0;
+
+          &:before {
+            content: '';
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            background-color: rgba(60, 60, 60, 0.33);
+            transition: background-color 0.5s;
+            left: -1.25rem;
+            top: 0.75rem;
+          }
+        }
+      }
+
+      table {
+        border-collapse: collapse;
+        border-spacing: 0;
+        margin-top: 0.8rem;
+        margin-bottom: 1.4rem;
+      }
+
+      tr {
+        background-color: #fff;
+        border-top: 1px solid #ccc;
+      }
+
+      th,
+      td {
+        padding: 5px 14px;
+        border: 1px solid #ddd;
+      }
+
+      blockquote {
+        margin: 1rem 0;
+        border-left: 0.2rem solid rgba(60, 60, 60, 0.29);
+        padding-left: 1rem;
+        transition: border-color 0.5s;
+
+        > p {
+          margin: 0;
+          font-size: 16px;
+          color: rgba(60, 60, 60, 0.7);
+          transition: color 0.5s;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/web/src/pages/Doc/Template.vue
+++ b/web/src/pages/Doc/Template.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    $$$$
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -0,0 +1,79 @@
+import routerList from './routerList'
+
+let langList = [
+  {
+    name: '中文',
+    path: 'zh'
+  },
+  {
+    name: 'English',
+    path: 'en'
+  }
+]
+let StartList = ['introduction', 'start', 'translate', 'changelog']
+let APIList = [
+  'constructor',
+  'node',
+  'render',
+  'view',
+  'keyCommand',
+  'command',
+  'batchExecution',
+  'richText',
+  'select',
+  'drag',
+  'keyboardNavigation',
+  'doExport',
+  'miniMap',
+  'watermark',
+  'xmind',
+  'utils'
+]
+
+const createList = (lang, list) => {
+  let langRouter = routerList.find(item => {
+    return item.lang === lang
+  })
+  let children = langRouter.children
+  return list
+    .filter(item => {
+      return children.find(child => {
+        return child.path === item
+      })
+    })
+    .map(item => {
+      return {
+        path: item,
+        name: children.find(child => {
+          return child.path === item
+        }).title
+      }
+    })
+}
+
+export default {
+  zh: [
+    {
+      groupName: '开始',
+      list: createList('zh', StartList)
+    },
+    {
+      groupName: 'API',
+      list: createList('zh', APIList)
+    }
+  ],
+  en: [
+    {
+      groupName: 'Start',
+      list: createList('en', StartList)
+    },
+    {
+      groupName: 'API',
+      list: createList('en', APIList)
+    }
+  ]
+}
+
+export {
+  langList
+}
--- a/web/src/pages/Doc/components/CatalogBar.vue
+++ b/web/src/pages/Doc/components/CatalogBar.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="catalogBarContainer">
+    <div class="catalogBarTitle">{{ pageCatalogTitle }}</div>
+    <div class="catalogList">
+      <div
+        class="catalogItem"
+        v-for="(item, index) in list"
+        :key="item.title + index"
+        :class="{ active: item.title === activeCatalog }"
+        @click="scrollTo(item, index)"
+      >
+        {{ item.title }}
+      </div>
+      <div
+        v-if="activeCatalogIndex !== -1"
+        class="activeBar"
+        :style="{ top: 4 + activeCatalogIndex * 28 + 'px' }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import t from '../i18n'
+
+export default {
+  props: {
+    scrollTop: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      lang: '',
+      list: [],
+      activeCatalog: '',
+      activeCatalogIndex: -1,
+      appointCatalog: true
+    }
+  },
+  computed: {
+    pageCatalogTitle() {
+      return t('pageCatalog', this.lang)
+    }
+  },
+  watch: {
+    $route(newVal, oldVal) {
+      this.initLang()
+      this.initCatalogList(newVal.path, oldVal.path)
+    },
+    scrollTop() {
+      this.onScroll()
+    },
+    lang(newVal, oldVal) {
+      if (!oldVal) {
+        return
+      }
+      this.initCatalogList()
+    }
+  },
+  mounted() {
+    this.initLang()
+    this.initCatalogList()
+    this.scrollToCatalog()
+  },
+  methods: {
+    // 获取当前语言
+    initLang() {
+      let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
+      if (lang && lang[1]) {
+        this.lang = lang[1]
+      }
+    },
+
+    // 初始化二级标题目录
+    initCatalogList(newPath, oldPath) {
+      let newPathRes = /^\/doc\/[^\/]+\/([^\/]+)/.exec(newPath)
+      let oldPathRes = /^\/doc\/[^\/]+\/([^\/]+)/.exec(oldPath)
+      // 语言变了、章节变了，需要重新获取二级标题目录
+      if ((!newPath && !oldPath) || newPathRes[1] !== oldPathRes[1]) {
+        this.$emit('scroll', 0)
+        this.resetActive()
+        let container = document.getElementById('doc')
+        let els = document.querySelectorAll('#doc h2')
+        this.list = Array.from(els).map(item => {
+          return {
+            title: item.textContent,
+            top: item.offsetTop - container.offsetTop
+          }
+        })
+      }
+    },
+
+    // 如果url中存在二级标题，那么滚动到该标题所在位置
+    scrollToCatalog() {
+      let url = /^\/doc\/[^\/]+\/[^\/]+\/([^\/]+)($|\/)/.exec(this.$route.path)
+      if (url && url[1]) {
+        let h = decodeURIComponent(url[1])
+        let item = this.list.find(item => {
+          return item.title === h
+        })
+        let index = this.list.findIndex(item => {
+          return item.title === h
+        })
+        if (item) {
+          this.activeCatalog = item.title
+          this.activeCatalogIndex = index
+          this.$emit('scroll', item.top)
+        }
+      }
+    },
+
+    // 手动点击切换到指定二级标题
+    scrollTo(item, index) {
+      this.appointCatalog = true
+      this.routeToNewCatalog(item.title)
+      this.$nextTick(() => {
+        this.activeCatalog = item.title
+        this.activeCatalogIndex = index
+        this.scrollToCatalog()
+      })
+    },
+
+    // 路由到指定二级标题
+    routeToNewCatalog(title) {
+      let path = this.$route.path
+      let url = ''
+      if (!title) {
+        url = path.replace(/^(\/doc\/[^\/]+\/[^\/]+)($|\/|.*)$/, '$1')
+      } else if (/^\/doc\/[^\/]+\/[^\/]+($|\/)$/.test(path)) {
+        url = path.replace(
+          /^(\/doc\/[^\/]+\/[^\/]+)($|\/)$/,
+          '$1/' + encodeURIComponent(title)
+        )
+      } else {
+        url = path.replace(
+          /^(\/doc\/[^\/]+\/[^\/]+\/)([^\/]+)($|\/)/,
+          (...args) => {
+            return args[1] + encodeURIComponent(title)
+          }
+        )
+      }
+      if (path === url) {
+        return
+      }
+      this.$router.push(url)
+    },
+
+    // 文档滚动时判断当前滚动到哪个二级标题
+    onScroll() {
+      if (this.appointCatalog) {
+        this.appointCatalog = false
+        return
+      }
+      let find = false
+      for (let i = 0; i < this.list.length; i++) {
+        let cur = this.list[i]
+        let next = this.list[i + 1]
+        if (this.scrollTop >= cur.top && (!next || this.scrollTop < next.top)) {
+          find = true
+          if (cur.title === this.activeCatalog) {
+            break
+          }
+          this.activeCatalog = cur.title
+          this.activeCatalogIndex = i
+          this.routeToNewCatalog(cur.title)
+          break
+        }
+      }
+      if (!find) {
+        this.resetActive()
+        this.routeToNewCatalog('')
+      }
+    },
+
+    resetActive() {
+      this.activeCatalog = ''
+      this.activeCatalogIndex = -1
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.catalogBarContainer {
+  width: 20%;
+  flex-shrink: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-top: 60px;
+  padding-bottom: 30px;
+  padding-left: 20px;
+
+  .catalogBarTitle {
+    font-weight: 700;
+    margin-bottom: 4px;
+    text-transform: uppercase;
+    font-size: 11px;
+    letter-spacing: 0.4px;
+  }
+
+  .catalogList {
+    position: relative;
+
+    .catalogItem {
+      color: rgba(60, 60, 60, 0.7);
+      transition: color 0.5s;
+      line-height: 28px;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+
+      &.active {
+        color: rgba(60, 60, 60, 1);
+        font-weight: bold;
+      }
+    }
+
+    .activeBar {
+      position: absolute;
+      left: -10px;
+      width: 4px;
+      height: 20px;
+      background-color: #42b883;
+      border-radius: 4px;
+      transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s,
+        background-color 0.5s;
+    }
+  }
+}
+</style>
--- a/web/src/pages/Doc/components/Header.vue
+++ b/web/src/pages/Doc/components/Header.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="headerContainer">
+    <div class="left">
+      <div class="title">
+        <img src="../../../assets/img/logo.png" alt="">
+        SimpleMindMap
+      </div>
+    </div>
+    <div class="center">
+      <div class="btn" @click="toDemo">{{ demoName }}</div>
+      <el-dropdown
+        trigger="click"
+        placement="bottom-start"
+        @command="handleCommand"
+      >
+        <span class="translateBtn">
+          {{ currentLangName }}<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="item in otherLangList"
+            :key="item.path"
+            :command="item.path"
+            >{{ item.name }}</el-dropdown-item
+          >
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <a href="https://github.com/wanglin2/mind-map" target="_blank">
+        <span class="iconfont icongithub"></span>
+      </a>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+
+<script>
+import { langList } from '../catalogList'
+import t from '../i18n'
+
+export default {
+  data() {
+    return {
+      lang: '',
+      currentLangName: '',
+      otherLangList: []
+    }
+  },
+  computed: {
+    demoName() {
+      return t('demo', this.lang)
+    }
+  },
+  watch: {
+    $route() {
+      this.init()
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
+      if (lang && lang[1]) {
+        this.lang = lang[1]
+        let currentLang = langList.find(item => {
+          return item.path === this.lang
+        })
+        this.currentLangName = currentLang.name
+        this.otherLangList = langList.filter(item => {
+          return item.path !== this.lang
+        })
+      }
+    },
+
+    toDemo() {
+      this.$router.push('/')
+    },
+
+    handleCommand(path) {
+      let url = this.$route.path.replace(/^\/doc\/([^\/]+)\//, (...args) => {
+        return `/doc/${path}/`
+      })
+      this.$router.push(url)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.headerContainer {
+  height: 55px;
+  border-bottom: 1px solid rgba(60, 60, 60, 0.12);
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+
+  .left {
+    width: 30%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .title {
+      width: 200px;
+      font-size: 24px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 30px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .center {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: flex-end;
+
+    .btn {
+      color: #213547;
+      cursor: pointer;
+      transition: color 0.5s;
+      margin-right: 15px;
+      font-size: 14px;
+
+      &:hover {
+        color: #42b883;
+      }
+    }
+
+    .translateBtn {
+      margin-right: 15px;
+      font-size: 16px;
+      color: #213547;
+      cursor: pointer;
+      margin-top: 1px;
+      display: block;
+      font-size: 14px;
+    }
+
+    a {
+      text-decoration: none;
+      color: rgba(60, 60, 60, 0.7);
+      transition: color 0.5s;
+      margin-right: 15px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+
+      &:hover {
+        color: rgba(60, 60, 60, 1);
+      }
+
+      .iconfont {
+        font-size: 30px;
+      }
+    }
+  }
+
+  .right {
+    width: 20%;
+  }
+}
+</style>
--- a/web/src/pages/Doc/components/Sidebar.vue
+++ b/web/src/pages/Doc/components/Sidebar.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="sideBarContainer">
+    <div class="catalogGroupList">
+      <div
+        class="catalogGroup"
+        v-for="(group, groupIndex) in groupList"
+        :key="groupIndex"
+      >
+        <div class="catalogGroupName">{{ group.groupName }}</div>
+        <div class="catalogList">
+          <div
+            class="catalogItem"
+            v-for="item in group.list"
+            :key="groupIndex + item.path"
+            :class="{ active: item.path === currentPath }"
+            @click="jump(item)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import catalogList from '../catalogList'
+
+export default {
+  data() {
+    return {
+      groupList: [],
+      lang: '',
+      currentPath: ''
+    }
+  },
+  created() {
+    this.initCatalog()
+  },
+  watch: {
+    $route() {
+      this.initCatalog()
+    }
+  },
+  methods: {
+    jump(item) {
+      if (item.path === this.currentPath) {
+        return
+      }
+      this.$router.push(`/doc/${this.lang}/${item.path}`)
+    },
+
+    initCatalog() {
+      // 目录列表
+      let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
+      if (lang && lang[1]) {
+        this.lang = lang[1]
+        this.groupList = catalogList[this.lang]
+      }
+      // 当前所在路径
+      let path = /^\/doc\/[^\/]+\/([^\/]+)(\/|$)/.exec(this.$route.path)
+      if (path && path[1]) {
+        this.currentPath = path[1]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.sideBarContainer {
+  width: 30%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 60px;
+  padding-bottom: 30px;
+  flex-shrink: 0;
+
+  .catalogGroupList {
+    width: 200px;
+
+    .catalogGroup {
+      padding-bottom: 16px;
+
+      .catalogGroupName {
+        line-height: 20px;
+        font-size: 13px;
+        font-weight: 600;
+        color: #213547;
+        transition: color 0.5s;
+        padding: 4px 0;
+      }
+
+      .catalogList {
+        .catalogItem {
+          line-height: 20px;
+          font-size: 13px;
+          font-weight: 500;
+          color: rgba(60, 60, 60, 0.7);
+          transition: color 0.5s;
+          cursor: pointer;
+          padding: 4px 0;
+
+          &:hover {
+            color: rgba(60, 60, 60, 1);
+          }
+
+          &.active {
+            color: #42b883;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
--- a/web/src/pages/Doc/en/batchExecution/index.md
+++ b/web/src/pages/Doc/en/batchExecution/index.md
@@ -0,0 +1,16 @@
+# batchExecution instance
+
+The `batchExecution` is used to batch asynchronously perform some operations,
+and if a certain operation is called multiple times at the same time, it will
+only be executed once in the next event loop. Can be obtained through
+`mindMap.batchExecution`
+
+## Method
+
+### push(name, fn)
+
+Add task.
+
+`name`: task name
+
+`fn`: task
--- a/web/src/pages/Doc/en/batchExecution/index.vue
+++ b/web/src/pages/Doc/en/batchExecution/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1>batchExecution instance</h1>
+<p>The <code>batchExecution</code> is used to batch asynchronously perform some operations,
+and if a certain operation is called multiple times at the same time, it will
+only be executed once in the next event loop. Can be obtained through
+<code>mindMap.batchExecution</code></p>
+<h2>Method</h2>
+<h3>push(name, fn)</h3>
+<p>Add task.</p>
+<p><code>name</code>: task name</p>
+<p><code>fn</code>: task</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -0,0 +1,187 @@
+# Changelog
+
+## 0.4.2
+
+New: The `setText` method of the Node class adds a second parameter to support setting rich text content.
+
+## 0.4.1
+
+New: 1.Add and throw node mouseenter and mouseleave events; 2.Node rich text supports setting background color; 3.Node rich text supports clear style.
+
+Fix: 1.Mac system touchpad scaling is the opposite problem; 2.When the device window.devicePixelRatio is not 1, the size of the rich text node in the exported image will become larger when there are rich text nodes.
+
+## 0.4.0
+
+New: The node supports rich text editing.
+
+## 0.3.4
+
+New: Automatic line wrapping function is added to node text.
+
+Fix: 1.Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes. 2.Fix the problem that high node height will overlap with other nodes in the case of bottom edge style.
+
+## 0.3.3
+
+Fix: The root node text cannot wrap.
+
+## 0.3.2
+
+Fix: 1.Fix the problem that the node style is not updated when the secondary node is dragged to other nodes or other nodes are dragged to the secondary node; 2.Fix the problem that when the actual content of the mind map is larger than the screen width and height, the excess part is not watermarked when exporting.
+
+## 0.3.1
+
+Fix: 1.The problem that deleting the background image does not take effect; 2.The problem that the connector runs above the root node when the node is dragged to the root node.
+
+New: Add position and size settings for background image display. This setting is also supported for exported pictures.
+
+## 0.3.0
+
+Upgrade to plugin architecture, pull out some non-core functions as plugins, register as needed, and reduce the overall volume.
+
+## 0.2.24
+
+New: Node free drag is changed to configurable, the default is `false`, not open; Support add watermark.
+
+## 0.2.23
+
+New: Support register new theme.
+
+## 0.2.22
+
+optimization：The theme and structure pictures of the built-in `simple-mind-map` package are removed and replaced by user self-maintenance. The original pictures can be found in the `web/assets/img/` directory.
+
+## 0.2.21
+
+New: Support node horizontal line style.
+
+## 0.2.20
+
+fix：When the distance from the canvas to the upper left corner of the window is not 0, the node dragging will have an offset problem.
+
+## 0.2.19
+
+fix：When the node is not activated, pressing any key will trigger the problem of automatic focus.
+
+## 0.2.18
+
+optimization：Keyboard navigation algorithm for finding focus, supporting simple algorithm, region algorithm and shadow algorithm.
+
+## 0.2.17
+
+New：Keyboard navigation, that is, switch the active nodes through the direction keys; The node text content can be edited directly in the outline.
+
+## 0.2.16
+
+optimization：Mini map; drag performance.
+
+## 0.2.15
+
+optimization：Local file editing.
+
+New：Double-click the image in the node to preview the large image.
+
+## 0.2.14
+
+optimization：Automatically expand when inserting child nodes.
+
+fix：The error occurred when the mini map was closed.
+
+## 0.2.13
+
+fix：The child node is missing when collapsing state replication.
+
+## 0.2.11
+
+fix：Fix the problem that is lost when the child node collapses state replication.
+
+New：Support mini map.
+
+## 0.2.10
+
+optimization：Focus immediately when you manually create a node.
+
+fix：Connection style depth update problem.
+
+New：Logical structure diagram and mind map add linear connection style and direct connection style.
+
+## 0.2.9
+
+New：Support the creation, opening and saving of local files on the computer.
+
+## 0.2.8
+
+fix：Xmind8 version file import failed.
+
+New：Expanding to the specified level is supported.
+
+## 0.2.7
+
+fix：The root node adds multiple nodes to burst the stack.
+
+New：Support import .xmind file.
+
+## 0.2.6
+
+New：The title tag is added when exporting svg.
+
+## 0.2.5
+
+fix：Bugs caused by node expansion and collapse.
+
+New：Node supports custom line styles.
+
+## 0.2.4
+
+New：Nodes support multiple shapes.
+
+## 0.2.3
+
+fix：Shortcut key conflicts when editing node text; Right-click menu shortcut prompt error; Right-click menu shortcut prompt.
+
+## 0.2.2
+
+fix：The input string '/' conflicts with the shortcut key '/'.
+
+## 0.2.1
+
+New：Support export as pdf.
+
+## 0.2.0
+
+New：Classic4 theme；Support adding summary; Support free drag; Move Node Up, Move Node Down, Copy Node, Cut Node, Paste Node, One-click Organize Cloth Shortcut; Library packaging; Ctrl+left click to select multiple.
+
+## 0.1.18
+
+fix：The problem that the node icon cannot be deleted; The tool button is grayed out and can still be clicked.
+
+## 0.1.17
+
+New：Add read-only mode.
+
+## 0.1.16
+
+New：Node notes support markdown and rich text.
+
+fix：Can't select text; Node annotations cannot hide problems after node activation; When editing text such as hyperlinks, notes, labels, etc., the return key and return key conflict with the shortcut key of mind map.
+
+## 0.1.15
+
+New：The status data supports saving the active status and view status (drag position, zoom value)；Support node drag.
+
+## 0.1.14
+
+fix：There are problems with setting topics when activating nodes.
+
+## 0.1.13
+
+New：Shortcut key function; Support export as json。
+
+optimization：Some details.
+
+## 0.1.12
+
+New：Local storage；Right-click menu function, etc.
+
+## 0.1.0
+
+Complete basic functions.
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <h1>Changelog</h1>
+<h2>0.4.2</h2>
+<p>New: The <code>setText</code> method of the Node class adds a second parameter to support setting rich text content.</p>
+<h2>0.4.1</h2>
+<p>New: 1.Add and throw node mouseenter and mouseleave events; 2.Node rich text supports setting background color; 3.Node rich text supports clear style.</p>
+<p>Fix: 1.Mac system touchpad scaling is the opposite problem; 2.When the device window.devicePixelRatio is not 1, the size of the rich text node in the exported image will become larger when there are rich text nodes.</p>
+<h2>0.4.0</h2>
+<p>New: The node supports rich text editing.</p>
+<h2>0.3.4</h2>
+<p>New: Automatic line wrapping function is added to node text.</p>
+<p>Fix: 1.Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes. 2.Fix the problem that high node height will overlap with other nodes in the case of bottom edge style.</p>
+<h2>0.3.3</h2>
+<p>Fix: The root node text cannot wrap.</p>
+<h2>0.3.2</h2>
+<p>Fix: 1.Fix the problem that the node style is not updated when the secondary node is dragged to other nodes or other nodes are dragged to the secondary node; 2.Fix the problem that when the actual content of the mind map is larger than the screen width and height, the excess part is not watermarked when exporting.</p>
+<h2>0.3.1</h2>
+<p>Fix: 1.The problem that deleting the background image does not take effect; 2.The problem that the connector runs above the root node when the node is dragged to the root node.</p>
+<p>New: Add position and size settings for background image display. This setting is also supported for exported pictures.</p>
+<h2>0.3.0</h2>
+<p>Upgrade to plugin architecture, pull out some non-core functions as plugins, register as needed, and reduce the overall volume.</p>
+<h2>0.2.24</h2>
+<p>New: Node free drag is changed to configurable, the default is <code>false</code>, not open; Support add watermark.</p>
+<h2>0.2.23</h2>
+<p>New: Support register new theme.</p>
+<h2>0.2.22</h2>
+<p>optimization：The theme and structure pictures of the built-in <code>simple-mind-map</code> package are removed and replaced by user self-maintenance. The original pictures can be found in the <code>web/assets/img/</code> directory.</p>
+<h2>0.2.21</h2>
+<p>New: Support node horizontal line style.</p>
+<h2>0.2.20</h2>
+<p>fix：When the distance from the canvas to the upper left corner of the window is not 0, the node dragging will have an offset problem.</p>
+<h2>0.2.19</h2>
+<p>fix：When the node is not activated, pressing any key will trigger the problem of automatic focus.</p>
+<h2>0.2.18</h2>
+<p>optimization：Keyboard navigation algorithm for finding focus, supporting simple algorithm, region algorithm and shadow algorithm.</p>
+<h2>0.2.17</h2>
+<p>New：Keyboard navigation, that is, switch the active nodes through the direction keys; The node text content can be edited directly in the outline.</p>
+<h2>0.2.16</h2>
+<p>optimization：Mini map; drag performance.</p>
+<h2>0.2.15</h2>
+<p>optimization：Local file editing.</p>
+<p>New：Double-click the image in the node to preview the large image.</p>
+<h2>0.2.14</h2>
+<p>optimization：Automatically expand when inserting child nodes.</p>
+<p>fix：The error occurred when the mini map was closed.</p>
+<h2>0.2.13</h2>
+<p>fix：The child node is missing when collapsing state replication.</p>
+<h2>0.2.11</h2>
+<p>fix：Fix the problem that is lost when the child node collapses state replication.</p>
+<p>New：Support mini map.</p>
+<h2>0.2.10</h2>
+<p>optimization：Focus immediately when you manually create a node.</p>
+<p>fix：Connection style depth update problem.</p>
+<p>New：Logical structure diagram and mind map add linear connection style and direct connection style.</p>
+<h2>0.2.9</h2>
+<p>New：Support the creation, opening and saving of local files on the computer.</p>
+<h2>0.2.8</h2>
+<p>fix：Xmind8 version file import failed.</p>
+<p>New：Expanding to the specified level is supported.</p>
+<h2>0.2.7</h2>
+<p>fix：The root node adds multiple nodes to burst the stack.</p>
+<p>New：Support import .xmind file.</p>
+<h2>0.2.6</h2>
+<p>New：The title tag is added when exporting svg.</p>
+<h2>0.2.5</h2>
+<p>fix：Bugs caused by node expansion and collapse.</p>
+<p>New：Node supports custom line styles.</p>
+<h2>0.2.4</h2>
+<p>New：Nodes support multiple shapes.</p>
+<h2>0.2.3</h2>
+<p>fix：Shortcut key conflicts when editing node text; Right-click menu shortcut prompt error; Right-click menu shortcut prompt.</p>
+<h2>0.2.2</h2>
+<p>fix：The input string '/' conflicts with the shortcut key '/'.</p>
+<h2>0.2.1</h2>
+<p>New：Support export as pdf.</p>
+<h2>0.2.0</h2>
+<p>New：Classic4 theme；Support adding summary; Support free drag; Move Node Up, Move Node Down, Copy Node, Cut Node, Paste Node, One-click Organize Cloth Shortcut; Library packaging; Ctrl+left click to select multiple.</p>
+<h2>0.1.18</h2>
+<p>fix：The problem that the node icon cannot be deleted; The tool button is grayed out and can still be clicked.</p>
+<h2>0.1.17</h2>
+<p>New：Add read-only mode.</p>
+<h2>0.1.16</h2>
+<p>New：Node notes support markdown and rich text.</p>
+<p>fix：Can't select text; Node annotations cannot hide problems after node activation; When editing text such as hyperlinks, notes, labels, etc., the return key and return key conflict with the shortcut key of mind map.</p>
+<h2>0.1.15</h2>
+<p>New：The status data supports saving the active status and view status (drag position, zoom value)；Support node drag.</p>
+<h2>0.1.14</h2>
+<p>fix：There are problems with setting topics when activating nodes.</p>
+<h2>0.1.13</h2>
+<p>New：Shortcut key function; Support export as json。</p>
+<p>optimization：Some details.</p>
+<h2>0.1.12</h2>
+<p>New：Local storage；Right-click menu function, etc.</p>
+<h2>0.1.0</h2>
+<p>Complete basic functions.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/command/index.md
+++ b/web/src/pages/Doc/en/command/index.md
@@ -0,0 +1,33 @@
+# command instance
+
+The `command` instance is responsible for adding and executing commands. It
+includes many built-in commands and can also be added manually. A command refers
+to an operation that needs to add a copy to the history stack data. The
+`mindMap.command` instance can be obtained through this."
+
+## Methods
+
+### add(name, fn)
+
+Add a command.
+
+`name`: Command name
+
+`fn`: Method to be executed by the command
+
+### remove(name, fn)
+
+Remove a command.
+
+`name`: Name of the command to be removed
+
+`fn`: Method to be removed, if not provided all methods for the command will be
+removed
+
+### getCopyData()
+
+Get a copy of the rendering tree data
+
+### clearHistory()
+
+Clear the history stack data
--- a/web/src/pages/Doc/en/command/index.vue
+++ b/web/src/pages/Doc/en/command/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>command instance</h1>
+<p>The <code>command</code> instance is responsible for adding and executing commands. It
+includes many built-in commands and can also be added manually. A command refers
+to an operation that needs to add a copy to the history stack data. The
+<code>mindMap.command</code> instance can be obtained through this.&quot;</p>
+<h2>Methods</h2>
+<h3>add(name, fn)</h3>
+<p>Add a command.</p>
+<p><code>name</code>: Command name</p>
+<p><code>fn</code>: Method to be executed by the command</p>
+<h3>remove(name, fn)</h3>
+<p>Remove a command.</p>
+<p><code>name</code>: Name of the command to be removed</p>
+<p><code>fn</code>: Method to be removed, if not provided all methods for the command will be
+removed</p>
+<h3>getCopyData()</h3>
+<p>Get a copy of the rendering tree data</p>
+<h3>clearHistory()</h3>
+<p>Clear the history stack data</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -0,0 +1,352 @@
+# Constructor
+
+## Basic use
+
+```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": []
+  }
+});
+```
+
+## Instantiation options
+
+| Field Name                       | Type    | Default Value    | Description                                                  | Required |
+| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
+| el                               | Element |                  | Container element, must be a DOM element                     | Yes      |
+| data                             | Object  | {}               | Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js |          |
+| layout                           | String  | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram) |          |
+| theme                            | String  | default          | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4 (v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple |          |
+| themeConfig                      | Object  | {}               | Theme configuration, will be merged with the selected theme, available fields refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js |          |
+| scaleRatio                       | Number  | 0.1              | The incremental scaling ratio                                |          |
+| maxTag                           | Number  | 5                | The maximum number of tags displayed in the node, any additional tags will be discarded |          |
+| exportPadding                    | Number  | 20               | The padding for exporting images                             |          |
+| imgTextMargin                    | Number  | 5                | The spacing between the image and text in the node           |          |
+| textContentMargin                | Number  | 2                | The spacing between various text information in the node, such as the spacing between the icon and text |          |
+| selectTranslateStep              | Number  | 3                | The canvas offset when mouse moves to the edge during multi-select node |          |
+| selectTranslateLimit             | Number  | 20               | The distance from the edge when the canvas begins to offset during multi-select node |          |
+| customNoteContentShow（v0.1.6+） | Object  | null             | Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }} |          |
+| readonly（v0.1.7+）              | Boolean | false            | Whether it is read-only mode                                 |          |
+| enableFreeDrag（v0.2.4+）        | Boolean | false            | Enable node free drag                                        |          |
+| watermarkConfig（v0.2.4+）       | Object  |                  | Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration |          |
+| textAutoWrapWidth（v0.3.4+）     | Number  | 500 |   Each line of text in the node will wrap automatically when it reaches the width               |          |
+
+### Watermark config
+
+| Field Name  | Type   | Default Value                               | Description                                                  |
+| ----------- | ------ | ------------------------------------------- | ------------------------------------------------------------ |
+| text        | String | ''                                          | Watermark text. If it is an empty string, the watermark will not be displayed |
+| lineSpacing | Number | 100                                         | Spacing between watermark lines                              |
+| textSpacing | Number | 100                                         | Spacing between watermarks in the same row                   |
+| angle       | Number | 30                                          | Tilt angle of watermark, range: [0, 90]                      |
+| textStyle   | Object | {color: '#999', opacity: 0.5, fontSize: 14} | Watermark text style                                         |
+
+## Static methods
+
+### defineTheme(name, config)
+
+> v0.2.23+
+
+Define new theme.
+
+`name`：New theme name
+
+`config`：New theme config
+
+`Simple-mind-map ` Built-in many themes. In addition, you can register new theme. It is recommended to register before instantiation, so that you can directly use the newly registered theme during instantiation. Use example:
+
+```js
+import MindMap from 'simple-mind-map'
+// 注册新主题
+MindMap.defineTheme('Theme name', {})
+
+// 1.实例化时使用新注册的主题
+const mindMap = new MindMap({
+    theme: 'Theme name'
+})
+
+// 2.动态切换新主题
+mindMap.setTheme('Theme name')
+```
+
+For all configurations of theme, please refer to [Default Topic](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js). The `defineTheme`method will merge the configuration you passed in with the default configuration. Most of the themes  do not need custom many parts. For a typical customized theme configuration, please refer to [blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js).
+
+### usePlugin(plugin, opt = {})
+
+> v0.3.0+
+
+- `opt`：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.
+
+If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.
+
+Note: The plugin needs to be registered before instantiating `MindMap`.
+
+### hasPlugin(plugin)
+
+> v0.4.0+
+
+Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is `-1`, it means that the plugin is not registered.
+
+
+## Static props
+
+### pluginList
+
+> v0.3.0+
+
+List of all currently registered plugins.
+
+
+
+## Instance methods
+
+### getSvgData()
+
+> v0.3.0+
+
+Get the `svg` data and return an object. The detailed structure is as follows:
+
+```js
+{
+  svg, // Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)
+  svgHTML, // String, svg string, i.e. html string, can be directly rendered to the small map container you prepared
+  rect: // Object, position, size, etc. of mind map graphics before zoom
+  origWidth, // Number, canvas width
+  origHeight, // Number, canvas height
+  scaleX, // Number, horizontal zoom value of mind map graphics
+  scaleY, // Number, vertical zoom value of mind map graphics
+}
+```
+
+### render(callback)
+
+- `callback`: `v0.3.2+`, `Function`, Called when the re-rendering is complete
+
+Triggers a full rendering, which will reuse nodes for better performance. If
+only the node positions have changed, this method can be called to `reRender`.
+
+### reRender(callback)
+
+- `callback`: `v0.3.2+`, `Function`, Called when the re-rendering is complete
+
+Performs a full re-render, clearing the canvas and creating new nodes. This has
+poor performance and should be used sparingly.
+
+### resize()
+
+After the container size has changed, this method should be called to adjust.
+
+### setMode(mode)
+
+> v0.1.7+
+
+Switches between readonly and edit mode.
+
+`mode`：readonly、edit
+
+### on(event, fn)
+
+Listen to an event. Event list:
+
+| Event Name                       | Description                                                              | Callback Parameters                                                                                             |
+| -------------------------------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+| data_change                      | Tree rendering data change, listen to this method to get the latest data | data (current tree rendering data)                                                                              |
+| view_data_change（v0.1.1+）      | View change data, such as when dragging or zooming                       | data (current view state data)                                                                                  |
+| back_forward                     | Forward or backward                                                      | activeHistoryIndex (current index in the history data array), length (current length of the history data array) |
+| draw_click                       | Canvas click event                                                       | e (event object)                                                                                                |
+| svg_mousedown                    | svg canvas mouse down event                                              | e (event object)                                                                                                |
+| mousedown                        | el element mouse down event                                              | e (event object), this (Event event class instance)                                                             |
+| mousemove                        | el element mouse move event                                              | e (event object), this (Event event class instance)                                                             |
+| drag                             | If it is a drag event while holding down the left button                 | e (event object), this (Event event class instance)                                                             |
+| mouseup                          | el element mouse up event                                                | e (event object), this (Event event class instance)                                                             |
+| mousewheel                       | Mouse scroll event                                                       | e (event object), dir (up or down scroll), this (Event event class instance)                                    |
+| contextmenu                      | svg canvas right mouse button menu event                                 | e (event object)                                                                                                |
+| node_click                       | Node click event                                                         | this (node instance), e (event object)                                                                          |
+| node_mousedown                   | Node mouse down event                                                    | this (node instance), e (event object)                                                                          |
+| node_mouseup                     | node mouseup event                                                       | this (node instance), e (event object)                                                                          |
+| node_mouseup                     | Node mouseup event                                                       | this (node instance), e (event object)                                                                          |
+| node_dblclick                    | Node double-click event                                                  | this (node instance), e (event object)                                                                          |
+| node_contextmenu                 | Node right-click menu event                                              | e (event object), this (node instance)                                                                          |
+| node_mouseenter（v0.4.1+）       | Node mouseenter event     | this (node instance), e (event object)            |
+| node_mouseleave（v0.4.1+）       | Node mouseleave event     | this (node instance), e (event object)            |
+| before_node_active               | Event before node activation                                             | this (node instance), activeNodeList (current list of active nodes)                                             |
+| node_active                      | Node activation event                                                    | this (node instance), activeNodeList (current list of active nodes)                                             |
+| expand_btn_click                 | Node expand or collapse event                                            | this (node instance)                                                                                            |
+| before_show_text_edit            | Event before node text edit box opens                                    |                                                                                                                 |
+| hide_text_edit                   | Node text edit box close event                                           | textEditNode (text edit box DOM node), activeNodeList (current list of active nodes)                            |
+| scale                            | Zoom event                                                               | scale (zoom ratio)                                                                                              |
+| node_img_dblclick（v0.2.15+）    | Node image double-click event                                            | this (node instance), e (event object)                                                                          |
+| node_tree_render_end（v0.2.16+） | Node tree render end event                                               |                                                                                                                 |
+| rich_text_selection_change（v0.4.0+）         |  Available when the `RichText` plugin is registered. Triggered when the text selection area changes when the node is edited         |  hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area）            |
+| transforming-dom-to-images（v0.4.0+）         |  Available when the `RichText` plugin is registered. When there is a `DOM` node in `svg`, the `DOM` node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting         |  index（Index of the node currently converted to）、len（Total number of nodes to be converted）            |
+
+### emit(event, ...args)
+
+Trigger an event, which can be one of the events listed above or a custom event.
+
+### off(event, fn)
+
+Unbind an event.
+
+### setTheme(theme)
+
+Switches the theme. Available themes can be found in the options table above.
+
+### getTheme()
+
+Gets the current theme.
+
+### setThemeConfig(config)
+
+Sets the theme configuration. `config` is the same as the `themeConfig` option
+in the options table above.
+
+### getCustomThemeConfig()
+
+Gets the custom theme configuration.
+
+### getThemeConfig(prop)
+
+Gets the value of a specific theme configuration property.
+
+### getConfig(*prop*)
+
+> 0.2.24+
+
+`prop`：Get the value of the specified configuration, and return the entire configuration if not passed
+
+Get config, That is,  `opt` of `new MindMap (opt)`
+
+### updateConfig(*opt* = {})
+
+> 0.2.24+
+
+`opt`：Configuration to update
+
+Update config，That is update `opt` of `new MindMap(opt)`，You can only update some data, such as:
+
+```js
+mindMap.updateConfig({
+    enableFreeDrag: true// 开启节点自由拖拽
+})
+```
+
+This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering
+
+### getLayout()
+
+Gets the current layout structure.
+
+### setLayout(layout)
+
+Sets the layout structure. Available values can be found in the `layout` field
+in the options table above.
+
+### execCommand(name, ...args)
+
+Executes a command, which will add a record to the history stack for undo or
+redo. All commands are as follows:
+
+| Command name                       | Description                                                  | Parameters                                                   |
+| ---------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| SELECT_ALL                         | Select all                                                   |                                                              |
+| BACK                               | Go back a specified number of steps                          | step (the number of steps to go back, default is 1)          |
+| FORWARD                            | Go forward a specified number of steps                       | step (the number of steps to go forward, default is 1)       |
+| INSERT_NODE                        | Insert a sibling node, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective |                                                              |
+| INSERT_CHILD_NODE                  | Insert a child node, the active node will be the operation node |                                                              |
+| UP_NODE                            | Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid |                                                              |
+| DOWN_NODE                          | Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid |                                                              |
+| REMOVE_NODE                        | Remove node, the active node will be the operation node      |                                                              |
+| PASTE_NODE                         | Paste node to a node, the active node will be the operation node | data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods) |
+| SET_NODE_STYLE                     | Modify node style                                            | node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state) |
+| SET_NODE_ACTIVE                    | Set whether the node is active                               | node (the node to set), active (boolean, whether to activate) |
+| CLEAR_ACTIVE_NODE                  | Clear the active state of the currently active node(s), the active node will be the operation node |                                                              |
+| SET_NODE_EXPAND                    | Set whether the node is expanded                             | node (the node to set), expand (boolean, whether to expand)  |
+| EXPAND_ALL                         | Expand all nodes                                             |                                                              |
+| UNEXPAND_ALL                       | Collapse all nodes                                           |                                                              |
+| UNEXPAND_TO_LEVEL (v0.2.8+)        | Expand to a specified level                                  | level (the level to expand to, 1, 2, 3...)                   |
+| SET_NODE_DATA                      | Update node data, that is, update the data in the data object of the node data object | node (the node to set), data (object, the data to update, e.g. `{expand: true}`) |
+| SET_NODE_TEXT                      | Set node text                                                | node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to `true`） |
+| SET_NODE_IMAGE                     | Set Node Image                                               | node (node to set), imgData (object, image information, structured as: `{url, title, width, height}`, the width and height of the image must be passed) |
+| SET_NODE_ICON                      | Set Node Icon                                                | node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the [https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js) file, icon name is type_name, such as ['priority_1']) |
+| SET_NODE_HYPERLINK                 | Set Node Hyperlink                                           | node (node to set), link (hyperlink address), title (hyperlink name, optional) |
+| SET_NODE_NOTE                      | Set Node Note                                                | node (node to set), note (note text)                         |
+| SET_NODE_TAG                       | Set Node Tag                                                 | node (node to set), tag (string array, built-in color information can be obtained in [https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js)) |
+| INSERT_AFTER (v0.1.5+)             | Move Node to After Another Node                              | node (node to move), exist (target node)                     |
+| INSERT_BEFORE (v0.1.5+)            | Move Node to Before Another Node                             | node (node to move), exist (target node)                     |
+| MOVE_NODE_TO (v0.1.5+)             | Move a node as a child of another node                       | node (the node to move), toNode (the target node)            |
+| ADD_GENERALIZATION (v0.2.0+)       | Add a node summary                                           | data (the data for the summary, in object format, all numerical fields of the node are supported, default is `{text: 'summary'}`) |
+| REMOVE_GENERALIZATION (v0.2.0+)    | Remove a node summary                                        |                                                              |
+| SET_NODE_CUSTOM_POSITION (v0.2.0+) | Set a custom position for a node                             | node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined) |
+| RESET_LAYOUT (v0.2.0+)             | Arrange layout with one click                                |                                                              |
+| SET_NODE_SHAPE (v0.2.4+)           | Set the shape of a node                                      | node (the node to set), shape (the shape, all shapes: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js) |
+
+### setData(data)
+
+Dynamic setting of mind map data, pure node data
+
+`data`: mind map structure data
+
+### setFullData(_data_)
+
+> v0.2.7+
+
+Dynamic setting of mind map data, including node data, layout, theme, view
+
+`data`: complete data, structure can refer to
+[exportFullData](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json)
+
+### getData(withConfig)
+
+> v0.2.9+
+
+Gets mind map data
+
+`withConfig`: `Boolean`, default is `false`, that is, the obtained data only
+includes the node tree, if `true` is passed, it will also include theme, layout,
+view, etc. data
+
+### export(type, isDownload, fileName)
+
+> You need to register the `Export` plugin first
+
+Export
+
+`type`: the type to be exported, optional values: png, svg, json, pdf (v0.2.1+),
+smm (essentially also json)
+
+`isDownload`: whether to directly trigger download, Boolean value, default is
+`false`
+
+`fileName`: (v0.1.6+) the name of the exported file, default is `思维导图` (mind
+map).
+
+### toPos(x, y)
+
+> v0.1.5+
+
+Convert the coordinates of the browser's visible window to coordinates relative
+to the canvas.
+
+### addPlugin(plugin, opt)
+
+> v0.4.0+
+
+Register plugin, Use `MindMap.usePlugin` to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the `addPlugin` method of the instance.
+
+### removePlugin(plugin)
+
+> v0.4.0+
+
+Remove registered plugin, Plugins registered through the `usePlugin` or `addPlugin` methods can be removed.
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -0,0 +1,694 @@
+<template>
+  <div>
+    <h1>Constructor</h1>
+<h2>Basic use</h2>
+<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mindMapContainer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map&quot;</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">&quot;mindMapContainer&quot;</span>),
+  <span class="hljs-attr">data</span>: {
+    <span class="hljs-string">&quot;data&quot;</span>: {
+        <span class="hljs-string">&quot;text&quot;</span>: <span class="hljs-string">&quot;Root Node&quot;</span>
+    },
+    <span class="hljs-string">&quot;children&quot;</span>: []
+  }
+});
+</code></pre>
+<h2>Instantiation options</h2>
+<table>
+<thead>
+<tr>
+<th>Field Name</th>
+<th>Type</th>
+<th>Default Value</th>
+<th>Description</th>
+<th>Required</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>el</td>
+<td>Element</td>
+<td></td>
+<td>Container element, must be a DOM element</td>
+<td>Yes</td>
+</tr>
+<tr>
+<td>data</td>
+<td>Object</td>
+<td>{}</td>
+<td>Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js</td>
+<td></td>
+</tr>
+<tr>
+<td>layout</td>
+<td>String</td>
+<td>logicalStructure</td>
+<td>Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)</td>
+<td></td>
+</tr>
+<tr>
+<td>theme</td>
+<td>String</td>
+<td>default</td>
+<td>Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4 (v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple</td>
+<td></td>
+</tr>
+<tr>
+<td>themeConfig</td>
+<td>Object</td>
+<td>{}</td>
+<td>Theme configuration, will be merged with the selected theme, available fields refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js</td>
+<td></td>
+</tr>
+<tr>
+<td>scaleRatio</td>
+<td>Number</td>
+<td>0.1</td>
+<td>The incremental scaling ratio</td>
+<td></td>
+</tr>
+<tr>
+<td>maxTag</td>
+<td>Number</td>
+<td>5</td>
+<td>The maximum number of tags displayed in the node, any additional tags will be discarded</td>
+<td></td>
+</tr>
+<tr>
+<td>exportPadding</td>
+<td>Number</td>
+<td>20</td>
+<td>The padding for exporting images</td>
+<td></td>
+</tr>
+<tr>
+<td>imgTextMargin</td>
+<td>Number</td>
+<td>5</td>
+<td>The spacing between the image and text in the node</td>
+<td></td>
+</tr>
+<tr>
+<td>textContentMargin</td>
+<td>Number</td>
+<td>2</td>
+<td>The spacing between various text information in the node, such as the spacing between the icon and text</td>
+<td></td>
+</tr>
+<tr>
+<td>selectTranslateStep</td>
+<td>Number</td>
+<td>3</td>
+<td>The canvas offset when mouse moves to the edge during multi-select node</td>
+<td></td>
+</tr>
+<tr>
+<td>selectTranslateLimit</td>
+<td>Number</td>
+<td>20</td>
+<td>The distance from the edge when the canvas begins to offset during multi-select node</td>
+<td></td>
+</tr>
+<tr>
+<td>customNoteContentShow（v0.1.6+）</td>
+<td>Object</td>
+<td>null</td>
+<td>Custom node note content display, object type, structure: {show: (noteContent, left, top) =&gt; {// your display node note logic }, hide: () =&gt; {// your hide node note logic }}</td>
+<td></td>
+</tr>
+<tr>
+<td>readonly（v0.1.7+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>Whether it is read-only mode</td>
+<td></td>
+</tr>
+<tr>
+<td>enableFreeDrag（v0.2.4+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>Enable node free drag</td>
+<td></td>
+</tr>
+<tr>
+<td>watermarkConfig（v0.2.4+）</td>
+<td>Object</td>
+<td></td>
+<td>Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration</td>
+<td></td>
+</tr>
+<tr>
+<td>textAutoWrapWidth（v0.3.4+）</td>
+<td>Number</td>
+<td>500</td>
+<td>Each line of text in the node will wrap automatically when it reaches the width</td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<h3>Watermark config</h3>
+<table>
+<thead>
+<tr>
+<th>Field Name</th>
+<th>Type</th>
+<th>Default Value</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>text</td>
+<td>String</td>
+<td>''</td>
+<td>Watermark text. If it is an empty string, the watermark will not be displayed</td>
+</tr>
+<tr>
+<td>lineSpacing</td>
+<td>Number</td>
+<td>100</td>
+<td>Spacing between watermark lines</td>
+</tr>
+<tr>
+<td>textSpacing</td>
+<td>Number</td>
+<td>100</td>
+<td>Spacing between watermarks in the same row</td>
+</tr>
+<tr>
+<td>angle</td>
+<td>Number</td>
+<td>30</td>
+<td>Tilt angle of watermark, range: [0, 90]</td>
+</tr>
+<tr>
+<td>textStyle</td>
+<td>Object</td>
+<td>{color: '#999', opacity: 0.5, fontSize: 14}</td>
+<td>Watermark text style</td>
+</tr>
+</tbody>
+</table>
+<h2>Static methods</h2>
+<h3>defineTheme(name, config)</h3>
+<blockquote>
+<p>v0.2.23+</p>
+</blockquote>
+<p>Define new theme.</p>
+<p><code>name</code>：New theme name</p>
+<p><code>config</code>：New theme config</p>
+<p><code>Simple-mind-map </code> Built-in many themes. In addition, you can register new theme. It is recommended to register before instantiation, so that you can directly use the newly registered theme during instantiation. Use example:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-comment">// 注册新主题</span>
+MindMap.defineTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>, {})
+
+<span class="hljs-comment">// 1.实例化时使用新注册的主题</span>
+<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-attr">theme</span>: <span class="hljs-string">&#x27;Theme name&#x27;</span>
+})
+
+<span class="hljs-comment">// 2.动态切换新主题</span>
+mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
+</code></pre>
+<p>For all configurations of theme, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">Default Topic</a>. The <code>defineTheme</code>method will merge the configuration you passed in with the default configuration. Most of the themes  do not need custom many parts. For a typical customized theme configuration, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>.</p>
+<h3>usePlugin(plugin, opt = {})</h3>
+<blockquote>
+<p>v0.3.0+</p>
+</blockquote>
+<ul>
+<li><code>opt</code>：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.</li>
+</ul>
+<p>If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.</p>
+<p>Note: The plugin needs to be registered before instantiating <code>MindMap</code>.</p>
+<h3>hasPlugin(plugin)</h3>
+<blockquote>
+<p>v0.4.0+</p>
+</blockquote>
+<p>Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is <code>-1</code>, it means that the plugin is not registered.</p>
+<h2>Static props</h2>
+<h3>pluginList</h3>
+<blockquote>
+<p>v0.3.0+</p>
+</blockquote>
+<p>List of all currently registered plugins.</p>
+<h2>Instance methods</h2>
+<h3>getSvgData()</h3>
+<blockquote>
+<p>v0.3.0+</p>
+</blockquote>
+<p>Get the <code>svg</code> data and return an object. The detailed structure is as follows:</p>
+<pre class="hljs"><code>{
+  svg, <span class="hljs-comment">// Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)</span>
+  svgHTML, <span class="hljs-comment">// String, svg string, i.e. html string, can be directly rendered to the small map container you prepared</span>
+  <span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object, position, size, etc. of mind map graphics before zoom</span>
+  origWidth, <span class="hljs-comment">// Number, canvas width</span>
+  origHeight, <span class="hljs-comment">// Number, canvas height</span>
+  scaleX, <span class="hljs-comment">// Number, horizontal zoom value of mind map graphics</span>
+  scaleY, <span class="hljs-comment">// Number, vertical zoom value of mind map graphics</span>
+}
+</code></pre>
+<h3>render(callback)</h3>
+<ul>
+<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
+</ul>
+<p>Triggers a full rendering, which will reuse nodes for better performance. If
+only the node positions have changed, this method can be called to <code>reRender</code>.</p>
+<h3>reRender(callback)</h3>
+<ul>
+<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
+</ul>
+<p>Performs a full re-render, clearing the canvas and creating new nodes. This has
+poor performance and should be used sparingly.</p>
+<h3>resize()</h3>
+<p>After the container size has changed, this method should be called to adjust.</p>
+<h3>setMode(mode)</h3>
+<blockquote>
+<p>v0.1.7+</p>
+</blockquote>
+<p>Switches between readonly and edit mode.</p>
+<p><code>mode</code>：readonly、edit</p>
+<h3>on(event, fn)</h3>
+<p>Listen to an event. Event list:</p>
+<table>
+<thead>
+<tr>
+<th>Event Name</th>
+<th>Description</th>
+<th>Callback Parameters</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>data_change</td>
+<td>Tree rendering data change, listen to this method to get the latest data</td>
+<td>data (current tree rendering data)</td>
+</tr>
+<tr>
+<td>view_data_change（v0.1.1+）</td>
+<td>View change data, such as when dragging or zooming</td>
+<td>data (current view state data)</td>
+</tr>
+<tr>
+<td>back_forward</td>
+<td>Forward or backward</td>
+<td>activeHistoryIndex (current index in the history data array), length (current length of the history data array)</td>
+</tr>
+<tr>
+<td>draw_click</td>
+<td>Canvas click event</td>
+<td>e (event object)</td>
+</tr>
+<tr>
+<td>svg_mousedown</td>
+<td>svg canvas mouse down event</td>
+<td>e (event object)</td>
+</tr>
+<tr>
+<td>mousedown</td>
+<td>el element mouse down event</td>
+<td>e (event object), this (Event event class instance)</td>
+</tr>
+<tr>
+<td>mousemove</td>
+<td>el element mouse move event</td>
+<td>e (event object), this (Event event class instance)</td>
+</tr>
+<tr>
+<td>drag</td>
+<td>If it is a drag event while holding down the left button</td>
+<td>e (event object), this (Event event class instance)</td>
+</tr>
+<tr>
+<td>mouseup</td>
+<td>el element mouse up event</td>
+<td>e (event object), this (Event event class instance)</td>
+</tr>
+<tr>
+<td>mousewheel</td>
+<td>Mouse scroll event</td>
+<td>e (event object), dir (up or down scroll), this (Event event class instance)</td>
+</tr>
+<tr>
+<td>contextmenu</td>
+<td>svg canvas right mouse button menu event</td>
+<td>e (event object)</td>
+</tr>
+<tr>
+<td>node_click</td>
+<td>Node click event</td>
+<td>this (node instance), e (event object)</td>
+</tr>
+<tr>
+<td>node_mousedown</td>
+<td>Node mouse down event</td>
+<td>this (node instance), e (event object)</td>
+</tr>
+<tr>
+<td>node_mouseup</td>
+<td>node mouseup event</td>
+<td>this (node instance), e (event object)</td>
+</tr>
+<tr>
+<td>node_mouseup</td>
+<td>Node mouseup event</td>
+<td>this (node instance), e (event object)</td>
+</tr>
+<tr>
+<td>node_dblclick</td>
+<td>Node double-click event</td>
+<td>this (node instance), e (event object)</td>
+</tr>
+<tr>
+<td>node_contextmenu</td>
+<td>Node right-click menu event</td>
+<td>e (event object), this (node instance)</td>
+</tr>
+<tr>
+<td>node_mouseenter（v0.4.1+）</td>
+<td>Node mouseenter event</td>
+<td>this (node instance), e (event object)</td>
+</tr>
+<tr>
+<td>node_mouseleave（v0.4.1+）</td>
+<td>Node mouseleave event</td>
+<td>this (node instance), e (event object)</td>
+</tr>
+<tr>
+<td>before_node_active</td>
+<td>Event before node activation</td>
+<td>this (node instance), activeNodeList (current list of active nodes)</td>
+</tr>
+<tr>
+<td>node_active</td>
+<td>Node activation event</td>
+<td>this (node instance), activeNodeList (current list of active nodes)</td>
+</tr>
+<tr>
+<td>expand_btn_click</td>
+<td>Node expand or collapse event</td>
+<td>this (node instance)</td>
+</tr>
+<tr>
+<td>before_show_text_edit</td>
+<td>Event before node text edit box opens</td>
+<td></td>
+</tr>
+<tr>
+<td>hide_text_edit</td>
+<td>Node text edit box close event</td>
+<td>textEditNode (text edit box DOM node), activeNodeList (current list of active nodes)</td>
+</tr>
+<tr>
+<td>scale</td>
+<td>Zoom event</td>
+<td>scale (zoom ratio)</td>
+</tr>
+<tr>
+<td>node_img_dblclick（v0.2.15+）</td>
+<td>Node image double-click event</td>
+<td>this (node instance), e (event object)</td>
+</tr>
+<tr>
+<td>node_tree_render_end（v0.2.16+）</td>
+<td>Node tree render end event</td>
+<td></td>
+</tr>
+<tr>
+<td>rich_text_selection_change（v0.4.0+）</td>
+<td>Available when the <code>RichText</code> plugin is registered. Triggered when the text selection area changes when the node is edited</td>
+<td>hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area）</td>
+</tr>
+<tr>
+<td>transforming-dom-to-images（v0.4.0+）</td>
+<td>Available when the <code>RichText</code> plugin is registered. When there is a <code>DOM</code> node in <code>svg</code>, the <code>DOM</code> node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting</td>
+<td>index（Index of the node currently converted to）、len（Total number of nodes to be converted）</td>
+</tr>
+</tbody>
+</table>
+<h3>emit(event, ...args)</h3>
+<p>Trigger an event, which can be one of the events listed above or a custom event.</p>
+<h3>off(event, fn)</h3>
+<p>Unbind an event.</p>
+<h3>setTheme(theme)</h3>
+<p>Switches the theme. Available themes can be found in the options table above.</p>
+<h3>getTheme()</h3>
+<p>Gets the current theme.</p>
+<h3>setThemeConfig(config)</h3>
+<p>Sets the theme configuration. <code>config</code> is the same as the <code>themeConfig</code> option
+in the options table above.</p>
+<h3>getCustomThemeConfig()</h3>
+<p>Gets the custom theme configuration.</p>
+<h3>getThemeConfig(prop)</h3>
+<p>Gets the value of a specific theme configuration property.</p>
+<h3>getConfig(<em>prop</em>)</h3>
+<blockquote>
+<p>0.2.24+</p>
+</blockquote>
+<p><code>prop</code>：Get the value of the specified configuration, and return the entire configuration if not passed</p>
+<p>Get config, That is,  <code>opt</code> of <code>new MindMap (opt)</code></p>
+<h3>updateConfig(<em>opt</em> = {})</h3>
+<blockquote>
+<p>0.2.24+</p>
+</blockquote>
+<p><code>opt</code>：Configuration to update</p>
+<p>Update config，That is update <code>opt</code> of <code>new MindMap(opt)</code>，You can only update some data, such as:</p>
+<pre class="hljs"><code>mindMap.updateConfig({
+    <span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// 开启节点自由拖拽</span>
+})
+</code></pre>
+<p>This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering</p>
+<h3>getLayout()</h3>
+<p>Gets the current layout structure.</p>
+<h3>setLayout(layout)</h3>
+<p>Sets the layout structure. Available values can be found in the <code>layout</code> field
+in the options table above.</p>
+<h3>execCommand(name, ...args)</h3>
+<p>Executes a command, which will add a record to the history stack for undo or
+redo. All commands are as follows:</p>
+<table>
+<thead>
+<tr>
+<th>Command name</th>
+<th>Description</th>
+<th>Parameters</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>SELECT_ALL</td>
+<td>Select all</td>
+<td></td>
+</tr>
+<tr>
+<td>BACK</td>
+<td>Go back a specified number of steps</td>
+<td>step (the number of steps to go back, default is 1)</td>
+</tr>
+<tr>
+<td>FORWARD</td>
+<td>Go forward a specified number of steps</td>
+<td>step (the number of steps to go forward, default is 1)</td>
+</tr>
+<tr>
+<td>INSERT_NODE</td>
+<td>Insert a sibling node, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective</td>
+<td></td>
+</tr>
+<tr>
+<td>INSERT_CHILD_NODE</td>
+<td>Insert a child node, the active node will be the operation node</td>
+<td></td>
+</tr>
+<tr>
+<td>UP_NODE</td>
+<td>Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid</td>
+<td></td>
+</tr>
+<tr>
+<td>DOWN_NODE</td>
+<td>Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid</td>
+<td></td>
+</tr>
+<tr>
+<td>REMOVE_NODE</td>
+<td>Remove node, the active node will be the operation node</td>
+<td></td>
+</tr>
+<tr>
+<td>PASTE_NODE</td>
+<td>Paste node to a node, the active node will be the operation node</td>
+<td>data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods)</td>
+</tr>
+<tr>
+<td>SET_NODE_STYLE</td>
+<td>Modify node style</td>
+<td>node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state)</td>
+</tr>
+<tr>
+<td>SET_NODE_ACTIVE</td>
+<td>Set whether the node is active</td>
+<td>node (the node to set), active (boolean, whether to activate)</td>
+</tr>
+<tr>
+<td>CLEAR_ACTIVE_NODE</td>
+<td>Clear the active state of the currently active node(s), the active node will be the operation node</td>
+<td></td>
+</tr>
+<tr>
+<td>SET_NODE_EXPAND</td>
+<td>Set whether the node is expanded</td>
+<td>node (the node to set), expand (boolean, whether to expand)</td>
+</tr>
+<tr>
+<td>EXPAND_ALL</td>
+<td>Expand all nodes</td>
+<td></td>
+</tr>
+<tr>
+<td>UNEXPAND_ALL</td>
+<td>Collapse all nodes</td>
+<td></td>
+</tr>
+<tr>
+<td>UNEXPAND_TO_LEVEL (v0.2.8+)</td>
+<td>Expand to a specified level</td>
+<td>level (the level to expand to, 1, 2, 3...)</td>
+</tr>
+<tr>
+<td>SET_NODE_DATA</td>
+<td>Update node data, that is, update the data in the data object of the node data object</td>
+<td>node (the node to set), data (object, the data to update, e.g. <code>{expand: true}</code>)</td>
+</tr>
+<tr>
+<td>SET_NODE_TEXT</td>
+<td>Set node text</td>
+<td>node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to <code>true</code>）</td>
+</tr>
+<tr>
+<td>SET_NODE_IMAGE</td>
+<td>Set Node Image</td>
+<td>node (node to set), imgData (object, image information, structured as: <code>{url, title, width, height}</code>, the width and height of the image must be passed)</td>
+</tr>
+<tr>
+<td>SET_NODE_ICON</td>
+<td>Set Node Icon</td>
+<td>node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js</a> file, icon name is type_name, such as ['priority_1'])</td>
+</tr>
+<tr>
+<td>SET_NODE_HYPERLINK</td>
+<td>Set Node Hyperlink</td>
+<td>node (node to set), link (hyperlink address), title (hyperlink name, optional)</td>
+</tr>
+<tr>
+<td>SET_NODE_NOTE</td>
+<td>Set Node Note</td>
+<td>node (node to set), note (note text)</td>
+</tr>
+<tr>
+<td>SET_NODE_TAG</td>
+<td>Set Node Tag</td>
+<td>node (node to set), tag (string array, built-in color information can be obtained in <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js</a>)</td>
+</tr>
+<tr>
+<td>INSERT_AFTER (v0.1.5+)</td>
+<td>Move Node to After Another Node</td>
+<td>node (node to move), exist (target node)</td>
+</tr>
+<tr>
+<td>INSERT_BEFORE (v0.1.5+)</td>
+<td>Move Node to Before Another Node</td>
+<td>node (node to move), exist (target node)</td>
+</tr>
+<tr>
+<td>MOVE_NODE_TO (v0.1.5+)</td>
+<td>Move a node as a child of another node</td>
+<td>node (the node to move), toNode (the target node)</td>
+</tr>
+<tr>
+<td>ADD_GENERALIZATION (v0.2.0+)</td>
+<td>Add a node summary</td>
+<td>data (the data for the summary, in object format, all numerical fields of the node are supported, default is <code>{text: 'summary'}</code>)</td>
+</tr>
+<tr>
+<td>REMOVE_GENERALIZATION (v0.2.0+)</td>
+<td>Remove a node summary</td>
+<td></td>
+</tr>
+<tr>
+<td>SET_NODE_CUSTOM_POSITION (v0.2.0+)</td>
+<td>Set a custom position for a node</td>
+<td>node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined)</td>
+</tr>
+<tr>
+<td>RESET_LAYOUT (v0.2.0+)</td>
+<td>Arrange layout with one click</td>
+<td></td>
+</tr>
+<tr>
+<td>SET_NODE_SHAPE (v0.2.4+)</td>
+<td>Set the shape of a node</td>
+<td>node (the node to set), shape (the shape, all shapes: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js)</td>
+</tr>
+</tbody>
+</table>
+<h3>setData(data)</h3>
+<p>Dynamic setting of mind map data, pure node data</p>
+<p><code>data</code>: mind map structure data</p>
+<h3>setFullData(<em>data</em>)</h3>
+<blockquote>
+<p>v0.2.7+</p>
+</blockquote>
+<p>Dynamic setting of mind map data, including node data, layout, theme, view</p>
+<p><code>data</code>: complete data, structure can refer to
+<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a></p>
+<h3>getData(withConfig)</h3>
+<blockquote>
+<p>v0.2.9+</p>
+</blockquote>
+<p>Gets mind map data</p>
+<p><code>withConfig</code>: <code>Boolean</code>, default is <code>false</code>, that is, the obtained data only
+includes the node tree, if <code>true</code> is passed, it will also include theme, layout,
+view, etc. data</p>
+<h3>export(type, isDownload, fileName)</h3>
+<blockquote>
+<p>You need to register the <code>Export</code> plugin first</p>
+</blockquote>
+<p>Export</p>
+<p><code>type</code>: the type to be exported, optional values: png, svg, json, pdf (v0.2.1+),
+smm (essentially also json)</p>
+<p><code>isDownload</code>: whether to directly trigger download, Boolean value, default is
+<code>false</code></p>
+<p><code>fileName</code>: (v0.1.6+) the name of the exported file, default is <code>思维导图</code> (mind
+map).</p>
+<h3>toPos(x, y)</h3>
+<blockquote>
+<p>v0.1.5+</p>
+</blockquote>
+<p>Convert the coordinates of the browser's visible window to coordinates relative
+to the canvas.</p>
+<h3>addPlugin(plugin, opt)</h3>
+<blockquote>
+<p>v0.4.0+</p>
+</blockquote>
+<p>Register plugin, Use <code>MindMap.usePlugin</code> to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the <code>addPlugin</code> method of the instance.</p>
+<h3>removePlugin(plugin)</h3>
+<blockquote>
+<p>v0.4.0+</p>
+</blockquote>
+<p>Remove registered plugin, Plugins registered through the <code>usePlugin</code> or <code>addPlugin</code> methods can be removed.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/doExport/index.md
+++ b/web/src/pages/Doc/en/doExport/index.md
@@ -0,0 +1,74 @@
+# Export plugin
+
+The `Export` plugin provides the export function.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import Export from 'simple-mind-map/src/Export.js'
+
+MindMap.usePlugin(Export)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.doExport`.
+
+## Methods
+
+### png()
+
+Exports as `png`, an async method that returns image data, `data:url` data which
+can be downloaded or displayed.
+
+### svg(name, domToImage = false, plusCssText)
+
+- `name`：`svg` title
+
+- `domToImage`：v0.4.0+, When node rich text editing is enabled, you can use this parameter to specify whether to convert the `dom` node in the `svg` into a picture
+
+- `plusCssText`：v0.4.0+, When node rich text editing is enabled and `domToImage` passes `false`, additional `css` styles can be added. If there is a `dom` node in `svg`, you can set some styles for the node through this parameter, such as:
+
+```js
+svg(
+  '', 
+  false, 
+  `* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }`
+)
+```
+
+Exports as `svg`, an async method that returns `svg` data, `data:url` data which
+can be downloaded or displayed.
+
+### getSvgData(domToImage)
+
+- `domToImage`：v0.4.0+, If node rich text is enabled, you can use this parameter to specify whether to convert the `DOM` node embedded in `svg` into a picture.
+
+Gets `svg` data, an async method that returns an object:
+
+```js
+{
+  node; // svg object
+  str; // svg string, if rich text editing is enabled and domToImage is set to true, the dom node in the svg character returned by this value will be converted into the form of an image
+  nodeWithDomToImg// v0.4.0+，The svg object after the DOM node is converted to an image has a value only when rich text editing is enabled and domToImage is set to true, otherwise null
+}
+```
+
+### pdf(name)
+
+> v0.2.1+
+
+`name`：File name
+
+Export as `pdf`
+
+### json(name, withConfig)
+
+`name`：It is temporarily useless, just pass an empty string
+
+`withConfig``：Boolean`, default `true`, Whether the data contains configuration, otherwise it is pure mind map node data
+
+Return `json` data, `data:url` type, you can download it yourself
--- a/web/src/pages/Doc/en/doExport/index.vue
+++ b/web/src/pages/Doc/en/doExport/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <h1>Export plugin</h1>
+<p>The <code>Export</code> plugin provides the export function.</p>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Export <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/Export.js&#x27;</span>
+
+MindMap.usePlugin(Export)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.doExport</code>.</p>
+<h2>Methods</h2>
+<h3>png()</h3>
+<p>Exports as <code>png</code>, an async method that returns image data, <code>data:url</code> data which
+can be downloaded or displayed.</p>
+<h3>svg(name, domToImage = false, plusCssText)</h3>
+<ul>
+<li>
+<p><code>name</code>：<code>svg</code> title</p>
+</li>
+<li>
+<p><code>domToImage</code>：v0.4.0+, When node rich text editing is enabled, you can use this parameter to specify whether to convert the <code>dom</code> node in the <code>svg</code> into a picture</p>
+</li>
+<li>
+<p><code>plusCssText</code>：v0.4.0+, When node rich text editing is enabled and <code>domToImage</code> passes <code>false</code>, additional <code>css</code> styles can be added. If there is a <code>dom</code> node in <code>svg</code>, you can set some styles for the node through this parameter, such as:</p>
+</li>
+</ul>
+<pre class="hljs"><code>svg(
+  <span class="hljs-string">&#x27;&#x27;</span>, 
+  <span class="hljs-literal">false</span>, 
+  <span class="hljs-string">`* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }`</span>
+)
+</code></pre>
+<p>Exports as <code>svg</code>, an async method that returns <code>svg</code> data, <code>data:url</code> data which
+can be downloaded or displayed.</p>
+<h3>getSvgData(domToImage)</h3>
+<ul>
+<li><code>domToImage</code>：v0.4.0+, If node rich text is enabled, you can use this parameter to specify whether to convert the <code>DOM</code> node embedded in <code>svg</code> into a picture.</li>
+</ul>
+<p>Gets <code>svg</code> data, an async method that returns an object:</p>
+<pre class="hljs"><code>{
+  node; <span class="hljs-comment">// svg object</span>
+  str; <span class="hljs-comment">// svg string, if rich text editing is enabled and domToImage is set to true, the dom node in the svg character returned by this value will be converted into the form of an image</span>
+  nodeWithDomToImg<span class="hljs-comment">// v0.4.0+，The svg object after the DOM node is converted to an image has a value only when rich text editing is enabled and domToImage is set to true, otherwise null</span>
+}
+</code></pre>
+<h3>pdf(name)</h3>
+<blockquote>
+<p>v0.2.1+</p>
+</blockquote>
+<p><code>name</code>：File name</p>
+<p>Export as <code>pdf</code></p>
+<h3>json(name, withConfig)</h3>
+<p><code>name</code>：It is temporarily useless, just pass an empty string</p>
+<p><code>withConfig``：Boolean</code>, default <code>true</code>, Whether the data contains configuration, otherwise it is pure mind map node data</p>
+<p>Return <code>json</code> data, <code>data:url</code> type, you can download it yourself</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
wanglin2	945a78b7b1	去除docs目录，更新群二维码	2023-03-06 14:26:02 +08:00
wanglin2	55acc19ab8	打包0.4.2	2023-03-01 09:24:51 +08:00
wanglin2	410f0be05e	Fetaure：Node类的setText方法增加第二个参数，以支持设置富文本内容	2023-03-01 09:17:45 +08:00
wanglin2	2d7c091071	打包0.4.1	2023-02-27 15:31:52 +08:00
wanglin2	9bf58a54ce	Feature：节点富文本编辑支持清除文字样式	2023-02-27 15:19:56 +08:00
wanglin2	231adeea44	Feature：富文本支持设置背景颜色	2023-02-27 14:58:01 +08:00
wanglin2	0ea618af39	Fix:1.Mac系统触控板缩放方向相反的问题;2.设备像素比不为1时导出图片中富文本节点尺寸变大的问题.Feater:节点抛出鼠标移入和移出事件	2023-02-26 10:07:03 +08:00
wanglin2	f66297ff99	打包0.4.0	2023-02-25 10:11:16 +08:00
wanglin2	3113bf2e1f	完善文档	2023-02-24 17:14:48 +08:00
wanglin2	8c114dac02	Feature：支持节点富文本编辑	2023-02-24 17:14:24 +08:00
wanglin2	06dba79272	新增图标	2023-02-24 17:13:07 +08:00
wanglin2	8441986ca7	修改文档	2023-02-20 19:25:59 +08:00
wanglin2	c8b50908e1	Fix：修复底边风格的情况下，节点高度过高会和其他节点重叠的问题	2023-02-20 15:10:27 +08:00
wanglin2	7e11fde892	打包0.3.4	2023-02-20 11:30:15 +08:00
wanglin2	3d9f3bd7a8	Fix：修复批量删除的节点中如果存在根节点会出现删除异常的问题	2023-02-20 11:26:26 +08:00
wanglin2	46e11649b0	优化节点文本编辑	2023-02-20 11:02:04 +08:00
wanglin2	161ef7590c	feature：节点文本增加自动换行功能	2023-02-20 10:14:34 +08:00
wanglin2	ca660a3c74	打包0.3.3	2023-02-14 09:38:38 +08:00
wanglin2	7a24872331	Fix：修复根节点无法黄的问题	2023-02-14 09:35:56 +08:00
wanglin2	eb4ea9fb3a	打包0.3.2	2023-02-03 11:13:58 +08:00
wanglin2	64228c02ff	修复当思维导图实际内容大于屏幕宽高时，导出的时候超出的部分没有绘制水印的问题	2023-02-03 11:09:43 +08:00
wanglin2	f184a5d948	修复二级节点拖拽到其他节点或其他节点拖拽到二级节点时节点样式没有更新的问题	2023-02-03 10:40:06 +08:00
wanglin2	0bf5b2d6f7	打包0.3.1	2023-02-01 16:30:29 +08:00
wanglin2	74a52ea386	导出d的图片支持background-size/position/repeat属性效果	2023-02-01 16:25:57 +08:00
wanglin2	9914eef5b9	修改文档	2023-01-31 15:06:24 +08:00
wanglin2	f547f741f2	1.修复删除背景图片不生效的问题；2.背景图片展示增加位置和大小设置;3.修复节点拖拽到根节点时连接线跑到根节点上方的问题	2023-01-31 15:04:38 +08:00
wanglin2	c26149fa42	修复demo设置了水印页面刷新后生效的问题	2023-01-31 13:35:46 +08:00
wanglin2	b2aa3648eb	支持当修改文档后自动重新编译生成vue组件	2023-01-31 11:15:34 +08:00
wanglin2	b997604ab2	打包0.3.0	2023-01-17 17:39:37 +08:00
wanglin2	c6929b82ad	插件化架构基本升级完成	2023-01-17 16:53:28 +08:00
wanglin2	b40da53aef	只读模式下禁止添加历史记录、禁止响应前进后退操作	2023-01-17 15:49:23 +08:00
wanglin2	1e5dfd97e1	提取多选节点Select类作为插件	2023-01-17 15:26:35 +08:00
wanglin2	97bcc22abd	提取导出类作为插件	2023-01-17 15:21:02 +08:00
wanglin2	bd655839cb	提取出键盘导航类作为插件	2023-01-17 14:39:43 +08:00
wanglin2	a53a4e8e1d	提取拖拽类Drag作为插件	2023-01-17 14:30:13 +08:00
wanglin2	eb01646747	提取水印类作为插件	2023-01-17 14:11:07 +08:00
wanglin2	d27eee0fae	开始进行插件化转换，即提取非核心的类作为插件，不再内置；抽取出校地图类插件	2023-01-17 13:56:57 +08:00
wanglin2	92ee241ed8	将xmind解析方法从MindMap类上移除，改为按需引入方式使用	2023-01-17 11:19:59 +08:00
wanglin2	660906e4c5	【春节快乐】修改文档	2023-01-17 10:55:28 +08:00
wanglin2	971f0d3446	打包0.2.24	2023-01-17 09:24:33 +08:00
wanglin2	63eccede7f	完成水印功能、新增水印文档	2023-01-17 09:20:37 +08:00
wanglin2	5bd6adb488	节点自由拖拽支持配置是否开启	2023-01-14 16:26:51 +08:00
wanglin2	fbdc5e0f39	完善文档	2023-01-14 14:44:53 +08:00
wanglin2	5e994322fe	全新文档	2023-01-14 11:33:05 +08:00