Changelog
+
0.6.3
+
修复：1.修复概要节点会响应插入节点快捷键的问题。
+
新增：1.支持自定义节点内容。
0.6.2
修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。
0.6.1
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index b84b65b9..b3946483 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/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`即可 | |
### 水印配置
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 21986e0e..eedc0dfe 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -329,6 +329,20 @@
节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例 |
|
+
+| isUseCustomNodeContent（v0.6.3+） |
+Boolean |
+false |
+是否自定义节点内容 |
+ |
+
+
+| customCreateNodeContent（v0.6.3+） |
+Function/null |
+null |
+如果isUseCustomNodeContent设为true，那么需要使用该选项传入一个方法，接收节点实例node为参数（如果要获取该节点的数据，可以通过node.nodeData.data），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回null即可 |
+ |
+
水印配置
diff --git a/web/src/pages/Doc/zh/course20/index.md b/web/src/pages/Doc/zh/course20/index.md
new file mode 100644
index 00000000..bbe61ec4
--- /dev/null
+++ b/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 = `
+
我是自定义节点
+ ${ 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
+ }
+}
+```
+
diff --git a/web/src/pages/Doc/zh/course20/index.vue b/web/src/pages/Doc/zh/course20/index.vue
new file mode 100644
index 00000000..482e42ae
--- /dev/null
+++ b/web/src/pages/Doc/zh/course20/index.vue
@@ -0,0 +1,107 @@
+
+
+
如何自定义节点内容
+
+该特性v0.6.3+版本支持
+
+
如果你想自定义节点的内容，那么可以在实例化simple-mind-map时传入一下选项：
+
new MindMap({
+ isUseCustomNodeContent: true,
+ customCreateNodeContent: (node) => {
+
+ }
+})
+
+
customCreateNodeContent方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：
+
node.nodeData.data
+
+
其他节点实例属性你可以自行打印出来看看。
+
customCreateNodeContent方法需要返回DOM节点，如果某个节点你不想自定义，那么可以返回null，那么还是会走内置的节点渲染逻辑。
+
如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。
+
示例1：渲染自定义DOM节点
+
{
+ 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组件，那么可以通过如下方式：
+
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({
+
+ propsData: {
+ html: node.nodeData.data.text
+ }
+ })
+ comp.$mount(el)
+ return comp.$el
+ }
+}
+
+
如果你的Vue组件比较复杂，里面用到了vueRouter、vuex、i18n等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。
+
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({
+
+ propsData: {
+ html: node.nodeData.data.text
+ },
+ router,
+ store,
+ i18n
+ })
+ comp.$mount(el)
+ return comp.$el
+ }
+}
+
+
示例3：渲染Vue3组件
+
import { createApp } from "vue"
+import CustomNodeContent from './CustomNodeContent.vue'
+
+{
+ customCreateNodeContent: (node) => {
+ let el = document.createElement('div')
+ const app = createApp(CustomNodeContent, {
+ html: node.nodeData.data.text
+ })
+ app.mount(el)
+ return el
+ }
+}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Edit/components/CustomNodeContent.vue b/web/src/pages/Edit/components/CustomNodeContent.vue
new file mode 100644
index 00000000..7da83ab9
--- /dev/null
+++ b/web/src/pages/Edit/components/CustomNodeContent.vue
@@ -0,0 +1,36 @@
+
+
+
{{ title }}
+
+
点击我会变色
+
+
+
+
+
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index 2c5e8f67..ad6402a0 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/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', () => {