Merge branch 'feature' into main

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

@@ -77,7 +77,7 @@ If you need a file in the format of `umd` module, such as `CDN` in the browser,
 <script scr="simpleMindMap.umd.min.js"></script>
 ```
 
-A global variable `window.simpleMindMap` will be created.
+A global variable `window.simpleMindMap` will be created. you can get `MindMap` constructor by `window.simpleMindMap.default`, for more detail info you can log `window.simpleMindMap`.
 
 The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
 

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

@@ -57,7 +57,7 @@ compile this dependency:</p>
 <pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;simpleMindMap.css&quot;</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">&quot;simpleMindMap.umd.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
-<p>A global variable <code>window.simpleMindMap</code> will be created.</p>
+<p>A global variable <code>window.simpleMindMap</code> will be created. you can get <code>MindMap</code> constructor by <code>window.simpleMindMap.default</code>, for more detail info you can log <code>window.simpleMindMap</code>.</p>
 <p>The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.</p>
 <p>（v0.5.4+）If you want to use the <code>ES</code> module directly on the browser side, you can find the <code>simpleMindMap.esm.js</code> and <code>simpleMindMap.esm.css</code> files in the <code>/simple-mind-map/dist/</code> directory.</p>
 <h2>Development</h2>

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

@@ -2,7 +2,7 @@
 
 > 该特性v0.6.3+版本支持
 
-如果你想自定义节点的内容，那么可以在实例化`simple-mind-map`时传入一下选项：
+如果你想自定义节点的内容，那么可以在实例化`simple-mind-map`时传入以下选项：
 
 ```js
 new MindMap({
@@ -23,6 +23,8 @@ node.nodeData.data
 
 `customCreateNodeContent`方法需要返回`DOM`节点，如果某个节点你不想自定义，那么可以返回`null`，那么还是会走内置的节点渲染逻辑。
 
+返回的`DOM`节点的宽高需要是确定的，如果是动态的那么会导致宽高获取错误，最终导致节点定位错误和发生重叠等问题。
+
 如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。
 
 ## 示例1：渲染自定义DOM节点
@@ -112,3 +114,6 @@ import CustomNodeContent from './CustomNodeContent.vue'
 }
 ```
 
+## 示例4：渲染react组件
+
+如果你成功渲染了`react`组件，欢迎[提交](https://github.com/wanglin2/mind-map/issues/new)示例代码给我~

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

@@ -4,7 +4,7 @@
 <blockquote>
 <p>该特性v0.6.3+版本支持</p>
 </blockquote>
-<p>如果你想自定义节点的内容，那么可以在实例化<code>simple-mind-map</code>时传入一下选项：</p>
+<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> {
@@ -17,6 +17,7 @@
 </code></pre>
 <p>其他节点实例属性你可以自行打印出来看看。</p>
 <p><code>customCreateNodeContent</code>方法需要返回<code>DOM</code>节点，如果某个节点你不想自定义，那么可以返回<code>null</code>，那么还是会走内置的节点渲染逻辑。</p>
+<p>返回的<code>DOM</code>节点的宽高需要是确定的，如果是动态的那么会导致宽高获取错误，最终导致节点定位错误和发生重叠等问题。</p>
 <p>如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。</p>
 <h2>示例1：渲染自定义DOM节点</h2>
 <pre class="hljs"><code>{
@@ -92,6 +93,8 @@
     }
 }
 </code></pre>
+<h2>示例4：渲染react组件</h2>
+<p>如果你成功渲染了<code>react</code>组件，欢迎<a href="https://github.com/wanglin2/mind-map/issues/new">提交</a>示例代码给我~</p>
 
   </div>
 </template>

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

@@ -72,7 +72,7 @@ const mindMap = new MindMap({
 <script scr="simpleMindMap.umd.min.js"></script>
 ```
 
-会创建一个全局变量`window.simpleMindMap`。
+会创建一个全局变量`window.simpleMindMap`，可以通过`window.simpleMindMap.default`获取到`MindMap`构造函数，详细信息可以把`window.simpleMindMap`打印出来看一下。
 
 这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
 

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

@@ -51,7 +51,7 @@
 <pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;simpleMindMap.css&quot;</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">&quot;simpleMindMap.umd.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
-<p>会创建一个全局变量<code>window.simpleMindMap</code>。</p>
+<p>会创建一个全局变量<code>window.simpleMindMap</code>，可以通过<code>window.simpleMindMap.default</code>获取到<code>MindMap</code>构造函数，详细信息可以把<code>window.simpleMindMap</code>打印出来看一下。</p>
 <p>这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。</p>
 <p>（v0.5.4+）如果你想直接在浏览器端通过<code>ES</code>模块的方式来使用，你可以在<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.esm.js</code>和<code>simpleMindMap.esm.css</code>文件。</p>
 <h2>开发</h2>