Merge branch 'feature' into main

simple-mind-map/index.js

@@ -11,127 +11,7 @@ import { layoutValueList, CONSTANTS } from './src/constants/constant'
 import { SVG } from '@svgdotjs/svg.js'
 import { simpleDeepClone } from './src/utils'
 import defaultTheme, { checkIsNodeSizeIndependenceConfig } from './src/themes/default'
-
+import { defaultOpt } from './src/constants/defaultOptions'
-// 默认选项配置
-const defaultOpt = {
-  // 是否只读
-  readonly: false,
-  // 布局
-  layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
-  // 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
-  fishboneDeg: 45,
-  // 主题
-  theme: 'default', // 内置主题：default（默认主题）
-  // 主题配置，会和所选择的主题进行合并
-  themeConfig: {},
-  // 放大缩小的增量比例
-  scaleRatio: 0.1,
-  // 最多显示几个标签
-  maxTag: 5,
-  // 导出图片时的内边距
-  exportPadding: 20,
-  // 展开收缩按钮尺寸
-  expandBtnSize: 20,
-  // 节点里图片和文字的间距
-  imgTextMargin: 5,
-  // 节点里各种文字信息的间距，如图标和文字的间距
-  textContentMargin: 2,
-  // 多选节点时鼠标移动到边缘时的画布移动偏移量
-  selectTranslateStep: 3,
-  // 多选节点时鼠标移动距边缘多少距离时开始偏移
-  selectTranslateLimit: 20,
-  // 自定义节点备注内容显示
-  customNoteContentShow: null,
-  /*
-        {
-            show(){},
-            hide(){}
-        }
-    */
-  // 是否开启节点自由拖拽
-  enableFreeDrag: false,
-  // 水印配置
-  watermarkConfig: {
-    text: '',
-    lineSpacing: 100,
-    textSpacing: 100,
-    angle: 30,
-    textStyle: {
-      color: '#999',
-      opacity: 0.5,
-      fontSize: 14
-    }
-  },
-  // 达到该宽度文本自动换行
-  textAutoWrapWidth: 500,
-  // 自定义鼠标滚轮事件处理
-  // 可以传一个函数，回调参数为事件对象
-  customHandleMousewheel: null,
-  // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
-  mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM,// zoom（放大缩小）、move（上下移动）
-  // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
-  mousewheelMoveStep: 100,
-  // 默认插入的二级节点的文字
-  defaultInsertSecondLevelNodeText: '二级节点',
-  // 默认插入的二级以下节点的文字
-  defaultInsertBelowSecondLevelNodeText: '分支主题',
-  // 展开收起按钮的颜色
-  expandBtnStyle: {
-    color: '#808080',
-    fill: '#fff'
-  },
-  // 自定义展开收起按钮的图标
-  expandBtnIcon: {
-    open: '',// svg字符串
-    close: ''
-  },
-  // 是否只有当鼠标在画布内才响应快捷键事件
-  enableShortcutOnlyWhenMouseInSvg: true,
-  // 是否开启节点动画过渡
-  enableNodeTransitionMove: true,
-  // 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
-  nodeTransitionMoveDuration: 300,
-  // 初始根节点的位置
-  initRootNodePosition: null,
-  // 导出png、svg、pdf时的图形内边距
-  exportPaddingX: 10,
-  exportPaddingY: 10,
-  // 节点文本编辑框的z-index
-  nodeTextEditZIndex: 3000,
-  // 节点备注浮层的z-index
-  nodeNoteTooltipZIndex: 3000,
-  // 是否在点击了画布外的区域时结束节点文本的编辑状态
-  isEndNodeTextEditOnClickOuter: true,
-  // 最大历史记录数
-  maxHistoryCount: 1000,
-  // 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
-  alwaysShowExpandBtn: false,
-  // 扩展节点可插入的图标
-  iconList: [
-    // {
-    //   name: '',// 分组名称
-    //   type: '',// 分组的值
-    //   list: [// 分组下的图标列表
-    //     {
-    //       name: '',// 图标名称
-    //       icon:''// 图标，可以传svg或图片
-    //     }
-    //   ]
-    // }
-  ],
-  // 节点最大缓存数量
-  maxNodeCacheCount: 1000,
-  // 关联线默认文字
-  defaultAssociativeLineText: '关联',
-  // 思维导图适应画布大小时的内边距
-  fitPadding: 50,
-  // 是否开启按住ctrl键多选节点功能
-  enableCtrlKeyNodeSelection: true,
-  // 设置为左键多选节点，右键拖动画布
-  useLeftKeySelectionRightKeyDrag: false,
-  // 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例
-  beforeTextEdit: null
-}
 
 //  思维导图
 class MindMap {

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/constants/defaultOptions.js

@@ -0,0 +1,126 @@
+import { CONSTANTS } from './constant'
+
+// 默认选项配置
+export const defaultOpt = {
+  // 是否只读
+  readonly: false,
+  // 布局
+  layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
+  // 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
+  fishboneDeg: 45,
+  // 主题
+  theme: 'default', // 内置主题：default（默认主题）
+  // 主题配置，会和所选择的主题进行合并
+  themeConfig: {},
+  // 放大缩小的增量比例
+  scaleRatio: 0.1,
+  // 最多显示几个标签
+  maxTag: 5,
+  // 导出图片时的内边距
+  exportPadding: 20,
+  // 展开收缩按钮尺寸
+  expandBtnSize: 20,
+  // 节点里图片和文字的间距
+  imgTextMargin: 5,
+  // 节点里各种文字信息的间距，如图标和文字的间距
+  textContentMargin: 2,
+  // 多选节点时鼠标移动到边缘时的画布移动偏移量
+  selectTranslateStep: 3,
+  // 多选节点时鼠标移动距边缘多少距离时开始偏移
+  selectTranslateLimit: 20,
+  // 自定义节点备注内容显示
+  customNoteContentShow: null,
+  /*
+          {
+              show(){},
+              hide(){}
+          }
+      */
+  // 是否开启节点自由拖拽
+  enableFreeDrag: false,
+  // 水印配置
+  watermarkConfig: {
+    text: '',
+    lineSpacing: 100,
+    textSpacing: 100,
+    angle: 30,
+    textStyle: {
+      color: '#999',
+      opacity: 0.5,
+      fontSize: 14
+    }
+  },
+  // 达到该宽度文本自动换行
+  textAutoWrapWidth: 500,
+  // 自定义鼠标滚轮事件处理
+  // 可以传一个函数，回调参数为事件对象
+  customHandleMousewheel: null,
+  // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
+  mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM, // zoom（放大缩小）、move（上下移动）
+  // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
+  mousewheelMoveStep: 100,
+  // 默认插入的二级节点的文字
+  defaultInsertSecondLevelNodeText: '二级节点',
+  // 默认插入的二级以下节点的文字
+  defaultInsertBelowSecondLevelNodeText: '分支主题',
+  // 展开收起按钮的颜色
+  expandBtnStyle: {
+    color: '#808080',
+    fill: '#fff'
+  },
+  // 自定义展开收起按钮的图标
+  expandBtnIcon: {
+    open: '', // svg字符串
+    close: ''
+  },
+  // 是否只有当鼠标在画布内才响应快捷键事件
+  enableShortcutOnlyWhenMouseInSvg: true,
+  // 是否开启节点动画过渡
+  enableNodeTransitionMove: true,
+  // 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
+  nodeTransitionMoveDuration: 300,
+  // 初始根节点的位置
+  initRootNodePosition: null,
+  // 导出png、svg、pdf时的图形内边距
+  exportPaddingX: 10,
+  exportPaddingY: 10,
+  // 节点文本编辑框的z-index
+  nodeTextEditZIndex: 3000,
+  // 节点备注浮层的z-index
+  nodeNoteTooltipZIndex: 3000,
+  // 是否在点击了画布外的区域时结束节点文本的编辑状态
+  isEndNodeTextEditOnClickOuter: true,
+  // 最大历史记录数
+  maxHistoryCount: 1000,
+  // 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
+  alwaysShowExpandBtn: false,
+  // 扩展节点可插入的图标
+  iconList: [
+    // {
+    //   name: '',// 分组名称
+    //   type: '',// 分组的值
+    //   list: [// 分组下的图标列表
+    //     {
+    //       name: '',// 图标名称
+    //       icon:''// 图标，可以传svg或图片
+    //     }
+    //   ]
+    // }
+  ],
+  // 节点最大缓存数量
+  maxNodeCacheCount: 1000,
+  // 关联线默认文字
+  defaultAssociativeLineText: '关联',
+  // 思维导图适应画布大小时的内边距
+  fitPadding: 50,
+  // 是否开启按住ctrl键多选节点功能
+  enableCtrlKeyNodeSelection: true,
+  // 设置为左键多选节点，右键拖动画布
+  useLeftKeySelectionRightKeyDrag: false,
+  // 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例
+  beforeTextEdit: null,
+  // 是否开启自定义节点内容
+  isUseCustomNodeContent: false,
+  // 自定义返回节点内容的方法
+  customCreateNodeContent: null
+}

simple-mind-map/src/core/render/Render.js

@@ -425,6 +425,9 @@ class Render {
     let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
     let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     let first = list[0]
+    if (first.isGeneralization) {
+      return
+    }
     if (first.isRoot) {
       this.insertChildNode(openEdit, appointNodes, appointData)
     } else {
@@ -455,6 +458,9 @@ class Render {
     let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
     let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     list.forEach(node => {
+      if (node.isGeneralization) {
+        return
+      }
       if (!node.nodeData.children) {
         node.nodeData.children = []
       }

simple-mind-map/src/core/render/TextEdit.js

@@ -66,10 +66,15 @@ export default class TextEdit {
 
   //  显示文本编辑框
   async show(node) {
-    if (typeof this.mindMap.opt.beforeTextEdit === 'function') {
+    // 使用了自定义节点内容那么不响应编辑事件
+    if (node.isUseCustomNodeContent()) {
+      return
+    }
+    let { beforeTextEdit } = this.mindMap.opt
+    if (typeof beforeTextEdit === 'function') {
       let isShow = false
       try {
-        isShow = await this.mindMap.opt.beforeTextEdit(node)
+        isShow = await beforeTextEdit(node)
       } catch (error) {
         isShow = false
       }

simple-mind-map/src/core/render/node/Node.js

@@ -1,7 +1,7 @@
 import Style from './Style'
 import Shape from './Shape'
-import { asyncRun } from '../../../utils'
+import { asyncRun, nodeToHTML } from '../../../utils'
-import { G, Rect } from '@svgdotjs/svg.js'
+import { G, Rect, ForeignObject, SVG } from '@svgdotjs/svg.js'
 import nodeGeneralizationMethods from './nodeGeneralization'
 import nodeExpandBtnMethods from './nodeExpandBtn'
 import nodeCommandWrapsMethods from './nodeCommandWraps'
@@ -59,6 +59,7 @@ class Node {
     this.group = null
     this.shapeNode = null // 节点形状节点
     // 节点内容对象
+    this._customNodeContent = null
     this._imgData = null
     this._iconData = null
     this._textData = null
@@ -154,6 +155,13 @@ class Node {
 
   //  创建节点的各个内容对象数据
   createNodeData() {
+    // 自定义节点内容
+    let { isUseCustomNodeContent, customCreateNodeContent } = this.mindMap.opt
+    if (isUseCustomNodeContent && customCreateNodeContent) {
+      this._customNodeContent = customCreateNodeContent(this)
+    }
+    // 如果没有返回内容，那么还是使用内置的节点内容
+    if (this._customNodeContent) return
     this._imgData = this.createImgNode()
     this._iconData = this.createIconNode()
     this._textData = this.createTextNode()
@@ -176,6 +184,14 @@ class Node {
 
   //  计算节点尺寸信息
   getNodeRect() {
+    // 自定义节点内容
+    if (this.isUseCustomNodeContent()) {
+      let rect = this.measureCustomNodeContentSize(this._customNodeContent)
+      return {
+        width: rect.width,
+        height: rect.height
+      }
+    }
     // 宽高
     let imgContentWidth = 0
     let imgContentHeight = 0
@@ -266,6 +282,15 @@ class Node {
     if (this.isGeneralization && this.generalizationBelongNode) {
       this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
     }
+    // 如果存在自定义节点内容，那么使用自定义节点内容
+    if (this.isUseCustomNodeContent()) {
+      let foreignObject = new ForeignObject()
+      foreignObject.width(width)
+      foreignObject.height(height)
+      foreignObject.add(SVG(this._customNodeContent))
+      this.group.add(foreignObject)
+      return 
+    }
     // 图片节点
     let imgHeight = 0
     if (this._imgData) {

simple-mind-map/src/core/render/node/nodeCreateContents.js

@@ -280,6 +280,32 @@ function createNoteNode() {
   }
 }
 
+// 测量自定义节点内容元素的宽高
+let warpEl = null
+function measureCustomNodeContentSize (content) {
+  if (!warpEl) {
+    warpEl = document.createElement('div')
+    warpEl.style.cssText = `
+      position: fixed;
+      left: -99999px;
+      top: -99999px;
+    `
+    this.mindMap.el.appendChild(warpEl)
+  }
+  warpEl.innerHTML = ''
+  warpEl.appendChild(content)
+  let rect = warpEl.getBoundingClientRect()
+  return {
+    width: rect.width,
+    height: rect.height
+  }
+}
+
+// 是否使用的是自定义节点内容
+function isUseCustomNodeContent()  {
+  return !!this._customNodeContent
+}
+
 export default {
     createImgNode,
     getImgShowSize,
@@ -288,5 +314,7 @@ export default {
     createTextNode,
     createHyperlinkNode,
     createTagNode,
-    createNoteNode
+    createNoteNode,
+    measureCustomNodeContentSize,
+    isUseCustomNodeContent
 }

simple-mind-map/src/utils/index.js

@@ -356,4 +356,15 @@ export const readBlob = (blob) => {
     }
     reader.readAsDataURL(blob)
   })
+}
+
+// 将dom节点转换成html字符串
+let nodeToHTMLWrapEl = null
+export const nodeToHTML = (node) => {
+  if (!nodeToHTMLWrapEl) {
+    nodeToHTMLWrapEl = document.createElement('div')
+  }
+  nodeToHTMLWrapEl.innerHTML = ''
+  nodeToHTMLWrapEl.appendChild(node)
+  return nodeToHTMLWrapEl.innerHTML
 }

web/src/pages/Doc/catalogList.js

@@ -11,7 +11,7 @@ let langList = [
   }
 ]
 let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
-let CourseList = new Array(19).fill(0).map((_, index) => {
+let CourseList = new Array(20).fill(0).map((_, index) => {
   return 'course' + (index + 1)
 })
 let APIList = [

web/src/pages/Doc/en/changelog/index.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.6.3
+
+Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.
+
+New: 1.Support custom node content.
+
 ## 0.6.2
 
 Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.

web/src/pages/Doc/en/changelog/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.6.3</h2>
+<p>Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.</p>
+<p>New: 1.Support custom node content.</p>
 <h2>0.6.2</h2>
 <p>Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.</p>
 <h2>0.6.1</h2>

web/src/pages/Doc/en/constructor/index.md

@@ -67,6 +67,8 @@ const mindMap = new MindMap({
 | enableCtrlKeyNodeSelection（v0.6.0+）     | Boolean  | true |  Whether to enable the function of holding down the Ctrl key to select multiple nodes |          |
 | useLeftKeySelectionRightKeyDrag（v0.6.0+）     | Boolean  | false | Setting to left click to select multiple nodes and right click to drag the canvas.  |          |
 | beforeTextEdit（v0.6.0+）     |  Function/null | null | The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance  |          |
+| isUseCustomNodeContent（v0.6.3+）     |  Boolean | false |  Whether to customize node content |          |
+| customCreateNodeContent（v0.6.3+）     |  Function/null | null | If `isUseCustomNodeContent` is set to `true`, then this option needs to be used to pass in a method that receives the node instance `node` as a parameter (if you want to obtain data for that node, you can use `node.nodeData.data`). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return `null` |          |
 
 ### Watermark config
 

web/src/pages/Doc/en/constructor/index.vue

@@ -329,6 +329,20 @@
 <td>The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance</td>
 <td></td>
 </tr>
+<tr>
+<td>isUseCustomNodeContent（v0.6.3+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>Whether to customize node content</td>
+<td></td>
+</tr>
+<tr>
+<td>customCreateNodeContent（v0.6.3+）</td>
+<td>Function/null</td>
+<td>null</td>
+<td>If <code>isUseCustomNodeContent</code> is set to <code>true</code>, then this option needs to be used to pass in a method that receives the node instance <code>node</code> as a parameter (if you want to obtain data for that node, you can use <code>node.nodeData.data</code>). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return <code>null</code></td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>

web/src/pages/Doc/routerList.js

@@ -26,6 +26,7 @@ export default [
       { path: 'course17', title: '导入和导出' },
       { path: 'course18', title: '如何持久化数据' },
       { path: 'course19', title: '插入和扩展节点图标' },
+      { path: 'course20', title: '如何自定义节点内容' },
       { path: 'doExport', title: 'Export 插件' },
       { path: 'drag', title: 'Drag插件' },
       { path: 'introduction', title: '简介' },

web/src/pages/Doc/zh/changelog/index.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.6.3
+
+修复：1.修复概要节点会响应插入节点快捷键的问题。
+
+新增：1.支持自定义节点内容。
+
 ## 0.6.2
 
 修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。

web/src/pages/Doc/zh/changelog/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.6.3</h2>
+<p>修复：1.修复概要节点会响应插入节点快捷键的问题。</p>
+<p>新增：1.支持自定义节点内容。</p>
 <h2>0.6.2</h2>
 <p>修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。</p>
 <h2>0.6.1</h2>

web/src/pages/Doc/zh/constructor/index.md

@@ -67,6 +67,8 @@ const mindMap = new MindMap({
 | enableCtrlKeyNodeSelection（v0.6.0+）     | Boolean  | true | 是否开启按住ctrl键多选节点的功能  |          |
 | useLeftKeySelectionRightKeyDrag（v0.6.0+）     | Boolean  | false | 设置为左键多选节点，右键拖动画布  |          |
 | beforeTextEdit（v0.6.0+）     |  Function/null | null | 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例  |          |
+| isUseCustomNodeContent（v0.6.3+）     |  Boolean | false | 是否自定义节点内容  |          |
+| customCreateNodeContent（v0.6.3+）     |  Function/null | null | 如果`isUseCustomNodeContent`设为`true`，那么需要使用该选项传入一个方法，接收节点实例`node`为参数（如果要获取该节点的数据，可以通过`node.nodeData.data`），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回`null`即可 |          |
 
 ### 水印配置
 

web/src/pages/Doc/zh/constructor/index.vue

@@ -329,6 +329,20 @@
 <td>节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例</td>
 <td></td>
 </tr>
+<tr>
+<td>isUseCustomNodeContent（v0.6.3+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>是否自定义节点内容</td>
+<td></td>
+</tr>
+<tr>
+<td>customCreateNodeContent（v0.6.3+）</td>
+<td>Function/null</td>
+<td>null</td>
+<td>如果<code>isUseCustomNodeContent</code>设为<code>true</code>，那么需要使用该选项传入一个方法，接收节点实例<code>node</code>为参数（如果要获取该节点的数据，可以通过<code>node.nodeData.data</code>），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回<code>null</code>即可</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>

web/src/pages/Doc/zh/course20/index.md

@@ -0,0 +1,114 @@
+# 如何自定义节点内容
+
+> 该特性v0.6.3+版本支持
+
+如果你想自定义节点的内容，那么可以在实例化`simple-mind-map`时传入一下选项：
+
+```js
+new MindMap({
+    isUseCustomNodeContent: true,
+    customCreateNodeContent: (node) => {
+        // return你的自定义DOM节点
+    }
+})
+```
+
+`customCreateNodeContent`方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：
+
+```js
+node.nodeData.data
+```
+
+其他节点实例属性你可以自行打印出来看看。
+
+`customCreateNodeContent`方法需要返回`DOM`节点，如果某个节点你不想自定义，那么可以返回`null`，那么还是会走内置的节点渲染逻辑。
+
+如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。
+
+## 示例1：渲染自定义DOM节点
+
+```js
+{
+    customCreateNodeContent: (node) => {
+        let div = document.createElement('div')
+        div.className = 'xxx'
+        div.style.cssText = `xxx`
+        div.innerHTML = `
+            <h1>我是自定义节点</h1>
+            ${ node.nodeData.text }
+        `
+        return div
+    }
+}
+```
+
+## 示例2：渲染Vue2组件
+
+如果想要使用一个相对简单的`Vue`组件，那么可以通过如下方式：
+
+```js
+import CustomNodeContent from 'CustomNodeContent.vue'
+import Vue from 'vue'
+
+{
+    customCreateNodeContent: (node) => {
+        let el = document.createElement('div')
+        let Comp = Vue.extend(CustomNodeContent)
+        let comp = new Comp({
+            // props
+            propsData: {
+                html: node.nodeData.data.text
+            }
+        })
+        comp.$mount(el)
+        return comp.$el
+    }
+}
+```
+
+如果你的`Vue`组件比较复杂，里面用到了`vueRouter`、`vuex`、`i18n`等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。
+
+```js
+import CustomNodeContent from 'CustomNodeContent.vue'
+import Vue from 'vue'
+import router from './router'
+import store from './store'
+import i18n from './i18n'
+
+{
+    customCreateNodeContent: (node) => {
+        let el = document.createElement('div')
+        let Comp = Vue.extend(CustomNodeContent)
+        let comp = new Comp({
+            // props
+            propsData: {
+                html: node.nodeData.data.text
+            },
+            router,
+            store,
+            i18n
+        })
+        comp.$mount(el)
+        return comp.$el
+    }
+}
+```
+
+## 示例3：渲染Vue3组件
+
+```js
+import { createApp } from "vue"
+import CustomNodeContent from './CustomNodeContent.vue'
+
+{
+    customCreateNodeContent: (node) => {
+        let el = document.createElement('div')
+        const app = createApp(CustomNodeContent, {// props
+            html: node.nodeData.data.text
+        })
+        app.mount(el)
+        return el
+    }
+}
+```
+

web/src/pages/Doc/zh/course20/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <h1>如何自定义节点内容</h1>
+<blockquote>
+<p>该特性v0.6.3+版本支持</p>
+</blockquote>
+<p>如果你想自定义节点的内容，那么可以在实例化<code>simple-mind-map</code>时传入一下选项：</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-attr">isUseCustomNodeContent</span>: <span class="hljs-literal">true</span>,
+    <span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+        <span class="hljs-comment">// return你的自定义DOM节点</span>
+    }
+})
+</code></pre>
+<p><code>customCreateNodeContent</code>方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：</p>
+<pre class="hljs"><code>node.nodeData.data
+</code></pre>
+<p>其他节点实例属性你可以自行打印出来看看。</p>
+<p><code>customCreateNodeContent</code>方法需要返回<code>DOM</code>节点，如果某个节点你不想自定义，那么可以返回<code>null</code>，那么还是会走内置的节点渲染逻辑。</p>
+<p>如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。</p>
+<h2>示例1：渲染自定义DOM节点</h2>
+<pre class="hljs"><code>{
+    <span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+        <span class="hljs-keyword">let</span> div = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
+        div.className = <span class="hljs-string">&#x27;xxx&#x27;</span>
+        div.style.cssText = <span class="hljs-string">`xxx`</span>
+        div.innerHTML = <span class="hljs-string">`
+            &lt;h1&gt;我是自定义节点&lt;/h1&gt;
+            <span class="hljs-subst">${ node.nodeData.text }</span>
+        `</span>
+        <span class="hljs-keyword">return</span> div
+    }
+}
+</code></pre>
+<h2>示例2：渲染Vue2组件</h2>
+<p>如果想要使用一个相对简单的<code>Vue</code>组件，那么可以通过如下方式：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> CustomNodeContent <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;CustomNodeContent.vue&#x27;</span>
+<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
+
+{
+    <span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+        <span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
+        <span class="hljs-keyword">let</span> Comp = Vue.extend(CustomNodeContent)
+        <span class="hljs-keyword">let</span> comp = <span class="hljs-keyword">new</span> Comp({
+            <span class="hljs-comment">// props</span>
+            <span class="hljs-attr">propsData</span>: {
+                <span class="hljs-attr">html</span>: node.nodeData.data.text
+            }
+        })
+        comp.$mount(el)
+        <span class="hljs-keyword">return</span> comp.$el
+    }
+}
+</code></pre>
+<p>如果你的<code>Vue</code>组件比较复杂，里面用到了<code>vueRouter</code>、<code>vuex</code>、<code>i18n</code>等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> CustomNodeContent <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;CustomNodeContent.vue&#x27;</span>
+<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
+<span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./router&#x27;</span>
+<span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./store&#x27;</span>
+<span class="hljs-keyword">import</span> i18n <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./i18n&#x27;</span>
+
+{
+    <span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+        <span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
+        <span class="hljs-keyword">let</span> Comp = Vue.extend(CustomNodeContent)
+        <span class="hljs-keyword">let</span> comp = <span class="hljs-keyword">new</span> Comp({
+            <span class="hljs-comment">// props</span>
+            <span class="hljs-attr">propsData</span>: {
+                <span class="hljs-attr">html</span>: node.nodeData.data.text
+            },
+            router,
+            store,
+            i18n
+        })
+        comp.$mount(el)
+        <span class="hljs-keyword">return</span> comp.$el
+    }
+}
+</code></pre>
+<h2>示例3：渲染Vue3组件</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>
+<span class="hljs-keyword">import</span> CustomNodeContent <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./CustomNodeContent.vue&#x27;</span>
+
+{
+    <span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+        <span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
+        <span class="hljs-keyword">const</span> app = createApp(CustomNodeContent, {<span class="hljs-comment">// props</span>
+            <span class="hljs-attr">html</span>: node.nodeData.data.text
+        })
+        app.mount(el)
+        <span class="hljs-keyword">return</span> el
+    }
+}
+</code></pre>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

web/src/pages/Edit/components/CustomNodeContent.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="customNodeContent">
+    <p>{{ title }}</p>
+    <p v-html="html"></p>
+    <p :style="{ backgroundColor: color }" @click="onClick">点击我会变色</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    html: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      title: '我是自定义节点',
+      color: ''
+    }
+  },
+  methods: {
+    onClick() {
+      this.color = 'red'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.customNodeContent {
+  padding: 10px;
+  cursor: pointer;
+}
+</style>

web/src/pages/Edit/components/Edit.vue

@@ -48,8 +48,14 @@ import Navigator from './Navigator.vue'
 import NodeImgPreview from './NodeImgPreview.vue'
 import SidebarTrigger from './SidebarTrigger.vue'
 import { mapState } from 'vuex'
-import customThemeList from '@/customThemes'
 import icon from '@/config/icon'
+import customThemeList from '@/customThemes'
+import CustomNodeContent from './CustomNodeContent.vue'
+import Color from './Color.vue'
+import Vue from 'vue'
+import router from '../../../router'
+import store from '../../../store'
+import i18n from '../../../i18n'
 
 // 注册插件
 MindMap
@@ -293,7 +299,32 @@ export default {
         },
         ...(config || {}),
         iconList: icon,
-        useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag
+        useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag,
+        // isUseCustomNodeContent: true,
+        // 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西
+        // customCreateNodeContent: (node) => {
+        //   let el = document.createElement('div')
+        //   let Comp = Vue.extend(Color)
+        //   let comp = new Comp({
+        //     router,
+        //     store,
+        //     i18n
+        //   })
+        //   comp.$mount(el)
+        //   return comp.$el
+        // },
+        // 示例2：组件里没有用到示例1的东西
+        // customCreateNodeContent: (node) => {
+        //   let el = document.createElement('div')
+        //   let Comp = Vue.extend(CustomNodeContent)
+        //   let comp = new Comp({
+        //     propsData: {
+        //       html: node.nodeData.data.text
+        //     }
+        //   })
+        //   comp.$mount(el)
+        //   return comp.$el
+        // }
       })
       if (this.openNodeRichText) this.addRichTextPlugin()
       this.mindMap.keyCommand.addShortcut('Control+s', () => {