Doc: update

2026-02-17 22:08:25 +08:00 · 2024-01-05 14:47:05 +08:00
parent 06a777eb64
commit eec99c1c43
25 changed files with 355 additions and 9 deletions
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.9.2",
+  "version": "0.9.3",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,37 @@
 # Changelog

+## 0.9.3
+
+Fix
+
+> 1.Fix the issue of text misalignment when nodes have icons in Safari browser.
+>
+> 2.Fix the issue of formula rendering in browsers with lower versions of Chrome kernel.
+>
+> 3.Fix the issue of new MouseEvent code execution errors when used in micro front-end framework applications.
+>
+> 4.Fix the issue of missing arrows on node connections, arrows on associated lines, and gradient backgrounds when exporting images.
+
+New:
+
+> 1.Export PDF from jspdf library to pdf-lib library.
+>
+> 2.If the second parameter of the set node text command (SETNODE-TEXT) is not passed, the previous value will be used.
+>
+> 3.There is an issue of incorrect width and height of exported images in Firefox browser when optimizing nodes with hyperlinks and comments.
+>
+> 4.In node text editing, if the pasted data is in SMM format, the pure text of the first node will be taken out for pasting.
+>
+> 5.Add interception operations for pasting when editing nodes without rich text.
+>
+> 6.Add a detailed event (data_change_detail) for updating node data, which can retrieve newly created, updated, or deleted node data.
+>
+> 7.Theme configuration supports setting node gradient background color.
+
+Demo:
+
+1.Support setting the background of node gradients.
+
 ## 0.9.2

 Fix:
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,26 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.9.3</h2>
+<p>Fix</p>
+<blockquote>
+<p>1.Fix the issue of text misalignment when nodes have icons in Safari browser.</p>
+<p>2.Fix the issue of formula rendering in browsers with lower versions of Chrome kernel.</p>
+<p>3.Fix the issue of new MouseEvent code execution errors when used in micro front-end framework applications.</p>
+<p>4.Fix the issue of missing arrows on node connections, arrows on associated lines, and gradient backgrounds when exporting images.</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Export PDF from jspdf library to pdf-lib library.</p>
+<p>2.If the second parameter of the set node text command (SETNODE-TEXT) is not passed, the previous value will be used.</p>
+<p>3.There is an issue of incorrect width and height of exported images in Firefox browser when optimizing nodes with hyperlinks and comments.</p>
+<p>4.In node text editing, if the pasted data is in SMM format, the pure text of the first node will be taken out for pasting.</p>
+<p>5.Add interception operations for pasting when editing nodes without rich text.</p>
+<p>6.Add a detailed event (data_change_detail) for updating node data, which can retrieve newly created, updated, or deleted node data.</p>
+<p>7.Theme configuration supports setting node gradient background color.</p>
+</blockquote>
+<p>Demo:</p>
+<p>1.Support setting the background of node gradients.</p>
 <h2>0.9.2</h2>
 <p>Fix:</p>
 <blockquote>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -420,6 +420,7 @@ Listen to an event. Event list:
 | beforeDestroy（v0.9.0+）    |  Triggered before destroying the mind map, i.e. triggered by calling the destroy method  |   |
 | body_mousedown（v0.9.2+）    | Mousedown event of document.body                      | e（event object）      |
 | body_click    | Click event of document.body                       | e（event object）      |
+| data_change_detail（v0.9.3+）    |  The detailed changes in rendering tree data will return an array, with each item representing an update point and each item being an object, There is a 'type' attribute that represents the type of detail, Including 'create' (create node), 'update' (update node), 'delete' (delete node), There is a 'data' attribute that represents the current updated node data. If it is of the 'update' type, there will also be an 'oldData' attribute that saves the data of the node before the update  | arr（Detail data）      |

 ### emit(event, ...args)

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -1109,6 +1109,11 @@ poor performance and should be used sparingly.</p>
 <td>Click event of document.body</td>
 <td>e（event object）</td>
 </tr>
+<tr>
+<td>data_change_detail（v0.9.3+）</td>
+<td>The detailed changes in rendering tree data will return an array, with each item representing an update point and each item being an object, There is a 'type' attribute that represents the type of detail, Including 'create' (create node), 'update' (update node), 'delete' (delete node), There is a 'data' attribute that represents the current updated node data. If it is of the 'update' type, there will also be an 'oldData' attribute that saves the data of the node before the update</td>
+<td>arr（Detail data）</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
--- a/web/src/pages/Doc/en/doExport/index.md
+++ b/web/src/pages/Doc/en/doExport/index.md
@@ -90,8 +90,12 @@ Exports as `svg`.

 Export as `pdf`. Unlike other export methods, this method does not return data and directly triggers the download.

+> In versions before v0.9.3, this method does not return data and will directly trigger the download.
+
 > After v0.6.0, an additional ExportPDF plugin needs to be registered

+> The internal export of PDF uses the PDF lib library to convert images into PDF. Currently, when exporting PDF with a large number of nodes, some content may be lost. Therefore, it is recommended that capable developers implement the PDF export function themselves. If there are backend developers in the project, they can also seek support from backend developers.
+
 ```js
 import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
 MindMap.usePlugin(ExportPDF)
--- a/web/src/pages/Doc/en/doExport/index.vue
+++ b/web/src/pages/Doc/en/doExport/index.vue
@@ -92,8 +92,14 @@ a.click()
 </ul>
 <p>Export as <code>pdf</code>. Unlike other export methods, this method does not return data and directly triggers the download.</p>
 <blockquote>
+<p>In versions before v0.9.3, this method does not return data and will directly trigger the download.</p>
+</blockquote>
+<blockquote>
 <p>After v0.6.0, an additional ExportPDF plugin needs to be registered</p>
 </blockquote>
+<blockquote>
+<p>The internal export of PDF uses the PDF lib library to convert images into PDF. Currently, when exporting PDF with a large number of nodes, some content may be lost. Therefore, it is recommended that capable developers implement the PDF export function themselves. If there are backend developers in the project, they can also seek support from backend developers.</p>
+</blockquote>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> ExportPDF <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/ExportPDF.js&#x27;</span>
 MindMap.usePlugin(ExportPDF)
 </code></pre>
--- a/web/src/pages/Doc/en/formula/index.md
+++ b/web/src/pages/Doc/en/formula/index.md
@@ -18,6 +18,13 @@ This plugin is used to support inserting formulas into nodes.

 > This formula may not render successfully on a few browsers. If you need to be compatible with these browsers, you can consider changing the configuration to 'HTML'. For detailed documentation, please refer to [Options](https://katex.org/docs/options). Using this configuration may require the introduction of a 'KaTeX' style file, which you can test on your own.

+> v0.9.3+will internally determine whether the current Chrome kernel version of the browser is lower than 100, If so, it will automatically convert 'output' from 'mathml' to 'html', At this point, the style file for 'KaTeX' needs to be imported, but it is not imported within the library, so you need to manually import it in the project. If you introduced 'simple-mind-map' through the 'npm' method, you can introduce it as follows:
+>
+> ```js
+> import 'simple-mind-map/node_modules/katex/dist/katex.min.css'
+> ```
+> If you are using packaged files such as '.umd.js' or '.esm.js', you can import them through online CDN services, such as `https://unpkg.com/browse/katex@0.16.9/dist/`, Of course, it is best to upload the 'css' file of the 'katex' and the corresponding font files in the 'fonts' directory to your own server.
+
 ## Register

 ```js
@@ -45,4 +52,10 @@ If you want to assign a formula to a node or nodes, you can pass the second para
 mindMap.execCommand('INSERT_FORMULA', 'a^2', [Node])
 ```

-Pass in the specified node instance through the second parameter.
+Pass in the specified node instance through the second parameter.
+
+## Methods
+
+### getKatexConfig()
+
+Get the current configuration passed to `Katex`.
--- a/web/src/pages/Doc/en/formula/index.vue
+++ b/web/src/pages/Doc/en/formula/index.vue
@@ -21,6 +21,12 @@
 <blockquote>
 <p>This formula may not render successfully on a few browsers. If you need to be compatible with these browsers, you can consider changing the configuration to 'HTML'. For detailed documentation, please refer to <a href="https://katex.org/docs/options">Options</a>. Using this configuration may require the introduction of a 'KaTeX' style file, which you can test on your own.</p>
 </blockquote>
+<blockquote>
+<p>v0.9.3+will internally determine whether the current Chrome kernel version of the browser is lower than 100, If so, it will automatically convert 'output' from 'mathml' to 'html', At this point, the style file for 'KaTeX' needs to be imported, but it is not imported within the library, so you need to manually import it in the project. If you introduced 'simple-mind-map' through the 'npm' method, you can introduce it as follows:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;simple-mind-map/node_modules/katex/dist/katex.min.css&#x27;</span>
+</code></pre>
+<p>If you are using packaged files such as '.umd.js' or '.esm.js', you can import them through online CDN services, such as <code>https://unpkg.com/browse/katex@0.16.9/dist/</code>, Of course, it is best to upload the 'css' file of the 'katex' and the corresponding font files in the 'fonts' directory to your own server.</p>
+</blockquote>
 <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> Formula <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Formula.js&#x27;</span>
@@ -37,6 +43,9 @@ MindMap.usePlugin(Formula)
 <pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_FORMULA&#x27;</span>, <span class="hljs-string">&#x27;a^2&#x27;</span>, [Node])
 </code></pre>
 <p>Pass in the specified node instance through the second parameter.</p>
+<h2>Methods</h2>
+<h3>getKatexConfig()</h3>
+<p>Get the current configuration passed to <code>Katex</code>.</p>

  </div>
 </template>
--- a/web/src/pages/Doc/en/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@@ -219,9 +219,9 @@ if `key` is not passed, return the `data` object
 Set the value of the specified key in the data object of the node's real data
 nodeData, `SET_NODE_DATA` command's shortcut method. This method and command will not update the view, so if you want to modify the text, use the 'setText' method or use the command pointing to the text.

-### setText(text, richText)
+### setText(text, richText, resetRichText)

- `richText`: v0.4.2+，`Boolean`, If you want to set rich text content, that is, `html` character, `richText` needs to be passed `true`
+- `richText`: v0.4.2+，`Boolean`, If you want to set rich text content, that is, `html` character, `richText` needs to be passed `true`. After version 0.9.3+, if this parameter is not passed, it will use previous value.

 - `resetRichText`: v0.6.10+, `Boolean`, whether to reset rich text, The default is 'false'. If 'true' is passed, the style of the rich text node will be reset

--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@@ -162,10 +162,10 @@ if <code>key</code> is not passed, return the <code>data</code> object</p>
 <h3>setData(data)</h3>
 <p>Set the value of the specified key in the data object of the node's real data
 nodeData, <code>SET_NODE_DATA</code> command's shortcut method. This method and command will not update the view, so if you want to modify the text, use the 'setText' method or use the command pointing to the text.</p>
-<h3>setText(text, richText)</h3>
+<h3>setText(text, richText, resetRichText)</h3>
 <ul>
 <li>
-<p><code>richText</code>: v0.4.2+，<code>Boolean</code>, If you want to set rich text content, that is, <code>html</code> character, <code>richText</code> needs to be passed <code>true</code></p>
+<p><code>richText</code>: v0.4.2+，<code>Boolean</code>, If you want to set rich text content, that is, <code>html</code> character, <code>richText</code> needs to be passed <code>true</code>. After version 0.9.3+, if this parameter is not passed, it will use previous value.</p>
 </li>
 <li>
 <p><code>resetRichText</code>: v0.6.10+, <code>Boolean</code>, whether to reset rich text, The default is 'false'. If 'true' is passed, the style of the rich text node will be reset</p>
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -424,6 +424,51 @@ Add a closed state to HTML self closing tags, `<div><img src="xxx"></div>` -> `<

 Check if the two node instance lists contain the same nodes.

+#### getChromeVersion()
+
+> v0.9.3+
+
+Get the current version of the Chrome kernel used by the browser. If the current browser is not using the 'Chrome' kernel, an empty string will be returned.
+
+#### transformTreeDataToObject(data)
+
+> v0.9.3+
+
+- `data`：Mind map node data.
+
+Convert the mind map tree structure to a level object.
+
+```js
+{
+        data: {
+            uid: 'xxx'
+        },
+        children: [
+            {
+                data: {
+                    uid: 'xxx'
+                },
+                children: []
+            }
+        ]
+    }
+```
+Convert to:
+```js
+    {
+        uid: {
+            children: [uid1, uid2],
+            data: {}
+        }
+    }
+```
+
+#### transformObjectToTreeData(data)
+
+> v0.9.3+
+
+Convert flat objects into a tree structure. Reverse operation of the transformTreeDataToObject method.
+
 ## Simulate CSS background in Canvas

 Import:
--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@@ -349,6 +349,46 @@ and copying the <code>data</code> of the data object, example:</p>
 <li><code>list1/list2</code>: Node instance list</li>
 </ul>
 <p>Check if the two node instance lists contain the same nodes.</p>
+<h4>getChromeVersion()</h4>
+<blockquote>
+<p>v0.9.3+</p>
+</blockquote>
+<p>Get the current version of the Chrome kernel used by the browser. If the current browser is not using the 'Chrome' kernel, an empty string will be returned.</p>
+<h4>transformTreeDataToObject(data)</h4>
+<blockquote>
+<p>v0.9.3+</p>
+</blockquote>
+<ul>
+<li><code>data</code>：Mind map node data.</li>
+</ul>
+<p>Convert the mind map tree structure to a level object.</p>
+<pre class="hljs"><code>{
+        <span class="hljs-attr">data</span>: {
+            <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
+        },
+        <span class="hljs-attr">children</span>: [
+            {
+                <span class="hljs-attr">data</span>: {
+                    <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
+                },
+                <span class="hljs-attr">children</span>: []
+            }
+        ]
+    }
+</code></pre>
+<p>Convert to:</p>
+<pre class="hljs"><code>    {
+        <span class="hljs-attr">uid</span>: {
+            <span class="hljs-attr">children</span>: [uid1, uid2],
+            <span class="hljs-attr">data</span>: {}
+        }
+    }
+</code></pre>
+<h4>transformObjectToTreeData(data)</h4>
+<blockquote>
+<p>v0.9.3+</p>
+</blockquote>
+<p>Convert flat objects into a tree structure. Reverse operation of the transformTreeDataToObject method.</p>
 <h2>Simulate CSS background in Canvas</h2>
 <p>Import:</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,37 @@
 # Changelog

+## 0.9.3
+
+修复：
+
+> 1.修复 Safari 浏览器上节点存在图标时文字位置错位的问题。
+>
+> 2.修复 Chrome 内核版本比较低的浏览器中公式无法渲染的问题。
+>
+> 3.修复在微前端框架子应用中使用时，new MouseEvent代码执行报错的问题。
+>
+> 4.修复导出图片时节点连线的箭头、关联线的箭头、渐变背景丢失的问题。
+
+新增：
+
+> 1.导出 pdf 从 jspdf 库改为 pdf-lib 库。
+>
+> 2.设置节点文本命令（SET_NODE_TEXT）的第二个参数如果没有传递，会使用之前的值。
+>
+> 3.优化节点存在超链接、备注时在 Firefox 浏览器中导出图片的宽高不正确的问题。
+>
+> 4.节点文本编辑中，如果粘贴的是 smm 格式的粘贴数据，那么会取出第一个节点的纯文本进行粘贴。
+>
+> 5.增加对节点非富文本编辑时的粘贴的拦截操作。
+>
+> 6.新增节点数据更新的明细事件（data_change_detail），可以获取新创建、更新、被删除的节点数据。
+>
+> 7.主题配置支持设置节点渐变背景色。
+
+Demo：
+
+1.支持设置节点渐变色的背景。
+
 ## 0.9.2

 修复：
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,26 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.9.3</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复 Safari 浏览器上节点存在图标时文字位置错位的问题。</p>
+<p>2.修复 Chrome 内核版本比较低的浏览器中公式无法渲染的问题。</p>
+<p>3.修复在微前端框架子应用中使用时，new MouseEvent代码执行报错的问题。</p>
+<p>4.修复导出图片时节点连线的箭头、关联线的箭头、渐变背景丢失的问题。</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.导出 pdf 从 jspdf 库改为 pdf-lib 库。</p>
+<p>2.设置节点文本命令（SET_NODE_TEXT）的第二个参数如果没有传递，会使用之前的值。</p>
+<p>3.优化节点存在超链接、备注时在 Firefox 浏览器中导出图片的宽高不正确的问题。</p>
+<p>4.节点文本编辑中，如果粘贴的是 smm 格式的粘贴数据，那么会取出第一个节点的纯文本进行粘贴。</p>
+<p>5.增加对节点非富文本编辑时的粘贴的拦截操作。</p>
+<p>6.新增节点数据更新的明细事件（data_change_detail），可以获取新创建、更新、被删除的节点数据。</p>
+<p>7.主题配置支持设置节点渐变背景色。</p>
+</blockquote>
+<p>Demo：</p>
+<p>1.支持设置节点渐变色的背景。</p>
 <h2>0.9.2</h2>
 <p>修复：</p>
 <blockquote>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -417,6 +417,7 @@ mindMap.setTheme('主题名称')
 | beforeDestroy（v0.9.0+）    |  思维导图销毁前触发，即调用了destroy方法触发  |   |
 | body_mousedown（v0.9.2+）    | document.body的鼠标按下事件                      | e（事件对象）      |
 | body_click    | document.body的点击事件                      | e（事件对象）      |
+| data_change_detail（v0.9.3+）    |  渲染树数据变化的明细，会返回一个数组，每一项代表一个更新点，每一项都是一个对象，存在一个`type`属性，代表明细的类型，包含`create`（创建节点）、`update`（更新节点）、`delete`（删除节点），存在一个`data`属性，代表当前更新的节点数据，如果是`update`类型，还会存在一个`oldData`属性，保存了更新前该节点的数据  | arr（明细数据）      |

 ### emit(event, ...args)

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -1017,6 +1017,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <td>document.body的点击事件</td>
 <td>e（事件对象）</td>
 </tr>
+<tr>
+<td>data_change_detail（v0.9.3+）</td>
+<td>渲染树数据变化的明细，会返回一个数组，每一项代表一个更新点，每一项都是一个对象，存在一个<code>type</code>属性，代表明细的类型，包含<code>create</code>（创建节点）、<code>update</code>（更新节点）、<code>delete</code>（删除节点），存在一个<code>data</code>属性，代表当前更新的节点数据，如果是<code>update</code>类型，还会存在一个<code>oldData</code>属性，保存了更新前该节点的数据</td>
+<td>arr（明细数据）</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
--- a/web/src/pages/Doc/zh/doExport/index.md
+++ b/web/src/pages/Doc/zh/doExport/index.md
@@ -94,6 +94,8 @@ svg(

 > v0.6.0版本以后，需要额外注册一个ExportPDF插件

+> 内部导出pdf使用的是pdf-lib库将图片转为pdf，目前当节点数量比较大时导出pdf可能会丢失部分内容，所以建议有能力的开发者自行实现pdf的导出功能，如果项目中有后端开发，也可以寻求后端开发人员的支持。
+
 ```js
 import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
 MindMap.usePlugin(ExportPDF)
--- a/web/src/pages/Doc/zh/doExport/index.vue
+++ b/web/src/pages/Doc/zh/doExport/index.vue
@@ -97,6 +97,9 @@ a.click()
 <blockquote>
 <p>v0.6.0版本以后，需要额外注册一个ExportPDF插件</p>
 </blockquote>
+<blockquote>
+<p>内部导出pdf使用的是pdf-lib库将图片转为pdf，目前当节点数量比较大时导出pdf可能会丢失部分内容，所以建议有能力的开发者自行实现pdf的导出功能，如果项目中有后端开发，也可以寻求后端开发人员的支持。</p>
+</blockquote>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> ExportPDF <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/ExportPDF.js&#x27;</span>
 MindMap.usePlugin(ExportPDF)
 </code></pre>
--- a/web/src/pages/Doc/zh/formula/index.md
+++ b/web/src/pages/Doc/zh/formula/index.md
@@ -16,6 +16,14 @@

 > 这在少数浏览器上公式可能无法成功渲染，如果你需要兼容这部分浏览器，你可以考虑把该配置改为`html`，详细文档可以参考：[Options](https://katex.org/docs/options)。使用这个配置可能还需要再引入`KaTeX`的样式文件，你可以自行测试。

+> v.0.9.3+版本内部会判断当前浏览器的Chrome内核版本是否低于100，是的话会自动将`output`由`mathml`转为`html`，此时需要引入`KaTeX`的样式文件，库内部没有引入，所以需要你手动在项目中引入。如果你是通过`npm`方式引入`simple-mind-map`，那么你可以这么引入：
+>
+> ```js
+> import 'simple-mind-map/node_modules/katex/dist/katex.min.css'
+> ```
+> 如果你使用的是`.umd.js`、`.esm.js`之类的打包后的文件，那么可以通过在线的CDN服务来引入，比如：`https://unpkg.com/browse/katex@0.16.9/dist/`，当然，最好是把`katex`的`css`文件，以及对应的`fonts`目录下的字体文件上传到你自己的服务器上。
+
+
 ## 注册

 ```js
@@ -43,4 +51,10 @@ mindMap.execCommand('INSERT_FORMULA', 'a^2')
 mindMap.execCommand('INSERT_FORMULA', 'a^2', [Node])
 ```

-通过第二个参数传入指定的节点实例即可。
+通过第二个参数传入指定的节点实例即可。
+
+## 方法
+
+### getKatexConfig()
+
+获取当前传递给`Katex`的配置。
--- a/web/src/pages/Doc/zh/formula/index.vue
+++ b/web/src/pages/Doc/zh/formula/index.vue
@@ -18,6 +18,12 @@
 <blockquote>
 <p>这在少数浏览器上公式可能无法成功渲染，如果你需要兼容这部分浏览器，你可以考虑把该配置改为<code>html</code>，详细文档可以参考：<a href="https://katex.org/docs/options">Options</a>。使用这个配置可能还需要再引入<code>KaTeX</code>的样式文件，你可以自行测试。</p>
 </blockquote>
+<blockquote>
+<p>v.0.9.3+版本内部会判断当前浏览器的Chrome内核版本是否低于100，是的话会自动将<code>output</code>由<code>mathml</code>转为<code>html</code>，此时需要引入<code>KaTeX</code>的样式文件，库内部没有引入，所以需要你手动在项目中引入。如果你是通过<code>npm</code>方式引入<code>simple-mind-map</code>，那么你可以这么引入：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;simple-mind-map/node_modules/katex/dist/katex.min.css&#x27;</span>
+</code></pre>
+<p>如果你使用的是<code>.umd.js</code>、<code>.esm.js</code>之类的打包后的文件，那么可以通过在线的CDN服务来引入，比如：<code>https://unpkg.com/browse/katex@0.16.9/dist/</code>，当然，最好是把<code>katex</code>的<code>css</code>文件，以及对应的<code>fonts</code>目录下的字体文件上传到你自己的服务器上。</p>
+</blockquote>
 <h2>注册</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> Formula <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Formula.js&#x27;</span>
@@ -34,6 +40,9 @@ MindMap.usePlugin(Formula)
 <pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_FORMULA&#x27;</span>, <span class="hljs-string">&#x27;a^2&#x27;</span>, [Node])
 </code></pre>
 <p>通过第二个参数传入指定的节点实例即可。</p>
+<h2>方法</h2>
+<h3>getKatexConfig()</h3>
+<p>获取当前传递给<code>Katex</code>的配置。</p>

  </div>
 </template>
--- a/web/src/pages/Doc/zh/node/index.md
+++ b/web/src/pages/Doc/zh/node/index.md
@@ -218,7 +218,7 @@

 ### setText(text, richText, resetRichText)

- `richText`：v0.4.2+，`Boolean`，如果要设置的是富文本内容，也就是`html`字符，`richText`需要传`true`
+- `richText`：v0.4.2+，`Boolean`，如果要设置的是富文本内容，也就是`html`字符，`richText`需要传`true`。在v0.9.3+版本后该参数不传会默认使用之前的值。

 - `resetRichText`：v0.6.10+，`Boolean`，是否要复位富文本，默认为`false`，如果传`true`那么会重置富文本节点的样式

--- a/web/src/pages/Doc/zh/node/index.vue
+++ b/web/src/pages/Doc/zh/node/index.vue
@@ -158,7 +158,7 @@
 <h3>setText(text, richText, resetRichText)</h3>
 <ul>
 <li>
-<p><code>richText</code>：v0.4.2+，<code>Boolean</code>，如果要设置的是富文本内容，也就是<code>html</code>字符，<code>richText</code>需要传<code>true</code></p>
+<p><code>richText</code>：v0.4.2+，<code>Boolean</code>，如果要设置的是富文本内容，也就是<code>html</code>字符，<code>richText</code>需要传<code>true</code>。在v0.9.3+版本后该参数不传会默认使用之前的值。</p>
 </li>
 <li>
 <p><code>resetRichText</code>：v0.6.10+，<code>Boolean</code>，是否要复位富文本，默认为<code>false</code>，如果传<code>true</code>那么会重置富文本节点的样式</p>
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -419,6 +419,51 @@ copyNodeTree({}, node)

 检查两个节点实例列表包含的节点是否是一样的。

+#### getChromeVersion()
+
+> v0.9.3+
+
+获取当前浏览器使用的`Chrome`内核版本。如果当前浏览器使用的不是 `Chrome`内核，那么会返回空字符串。
+
+#### transformTreeDataToObject(data)
+
+> v0.9.3+
+
+- `data`：思维导图节点数据。
+
+将思维导图树结构转平级对象。
+
+```js
+{
+        data: {
+            uid: 'xxx'
+        },
+        children: [
+            {
+                data: {
+                    uid: 'xxx'
+                },
+                children: []
+            }
+        ]
+    }
+```
+转为：
+```js
+    {
+        uid: {
+            children: [uid1, uid2],
+            data: {}
+        }
+    }
+```
+
+#### transformObjectToTreeData(data)
+
+> v0.9.3+
+
+将平级对象转树结构。transformTreeDataToObject方法的反向操作。
+
 ## 在canvas中模拟css的背景属性

 引入：
--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@@ -344,6 +344,46 @@
 <li><code>list1/list2</code>：节点实例列表</li>
 </ul>
 <p>检查两个节点实例列表包含的节点是否是一样的。</p>
+<h4>getChromeVersion()</h4>
+<blockquote>
+<p>v0.9.3+</p>
+</blockquote>
+<p>获取当前浏览器使用的<code>Chrome</code>内核版本。如果当前浏览器使用的不是 <code>Chrome</code>内核，那么会返回空字符串。</p>
+<h4>transformTreeDataToObject(data)</h4>
+<blockquote>
+<p>v0.9.3+</p>
+</blockquote>
+<ul>
+<li><code>data</code>：思维导图节点数据。</li>
+</ul>
+<p>将思维导图树结构转平级对象。</p>
+<pre class="hljs"><code>{
+        <span class="hljs-attr">data</span>: {
+            <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
+        },
+        <span class="hljs-attr">children</span>: [
+            {
+                <span class="hljs-attr">data</span>: {
+                    <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
+                },
+                <span class="hljs-attr">children</span>: []
+            }
+        ]
+    }
+</code></pre>
+<p>转为：</p>
+<pre class="hljs"><code>    {
+        <span class="hljs-attr">uid</span>: {
+            <span class="hljs-attr">children</span>: [uid1, uid2],
+            <span class="hljs-attr">data</span>: {}
+        }
+    }
+</code></pre>
+<h4>transformObjectToTreeData(data)</h4>
+<blockquote>
+<p>v0.9.3+</p>
+</blockquote>
+<p>将平级对象转树结构。transformTreeDataToObject方法的反向操作。</p>
 <h2>在canvas中模拟css的背景属性</h2>
 <p>引入：</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>