From 410f0be05e9f5e1aaf0c7b5c0e501e5625bba37e Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Wed, 1 Mar 2023 09:17:45 +0800
Subject: [PATCH] =?UTF-8?q?Fetaure=EF=BC=9ANode=E7=B1=BB=E7=9A=84setText?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=E5=A2=9E=E5=8A=A0=E7=AC=AC=E4=BA=8C=E4=B8=AA?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=EF=BC=8C=E4=BB=A5=E6=94=AF=E6=8C=81=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=AF=8C=E6=96=87=E6=9C=AC=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/package.json                |  2 +-
 simple-mind-map/src/Node.js                 |  4 +-
 web/src/pages/Doc/en/changelog/index.md     |  4 ++
 web/src/pages/Doc/en/changelog/index.vue    |  2 +
 web/src/pages/Doc/en/constructor/index.md   | 66 ++++++++++----------
 web/src/pages/Doc/en/constructor/index.vue  |  2 +-
 web/src/pages/Doc/en/introduction/index.md  |  2 +
 web/src/pages/Doc/en/introduction/index.vue |  1 +
 web/src/pages/Doc/en/node/index.md          |  4 +-
 web/src/pages/Doc/en/node/index.vue         |  5 +-
 web/src/pages/Doc/zh/changelog/index.md     |  4 ++
 web/src/pages/Doc/zh/changelog/index.vue    |  2 +
 web/src/pages/Doc/zh/constructor/index.md   | 68 ++++++++++-----------
 web/src/pages/Doc/zh/constructor/index.vue  |  2 +-
 web/src/pages/Doc/zh/introduction/index.md  |  2 +
 web/src/pages/Doc/zh/introduction/index.vue |  1 +
 web/src/pages/Doc/zh/node/index.md          |  4 +-
 web/src/pages/Doc/zh/node/index.vue         |  5 +-
 18 files changed, 104 insertions(+), 76 deletions(-)

diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json
index f14a5773..a7a6bd20 100644
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {
diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js
index f5dce3cd..0440938e 100644
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
@@ -1217,8 +1217,8 @@ class Node {
 
   //  设置文本
 
-  setText(text) {
-    this.mindMap.execCommand('SET_NODE_TEXT', this, text)
+  setText(text, richText) {
+    this.mindMap.execCommand('SET_NODE_TEXT', this, text, richText)
   }
 
   //  设置图片
diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md
index 29facfd4..ce47c0c0 100644
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,9 @@
 # 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.
diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue
index 0a87e95b..23f48957 100644
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,8 @@
 <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>
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md
index 805c8850..60621e58 100644
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -258,39 +258,39 @@ in the options table above.
 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)                                                                                                                                                                                                                                                                                                 |
-| 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)                                                                                                                                                                                                                       |
+| 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)
 
diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue
index 621dfd0f..14df481d 100644
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -565,7 +565,7 @@ redo. All commands are as follows:</p>
 <tr>
 <td>SET_NODE_TEXT</td>
 <td>Set node text</td>
-<td>node (the node to set), text (the new text for the node)</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>
diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md
index 22b26ab4..8417e610 100644
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -62,6 +62,8 @@ Documentation, etc.
 
 [When you press the direction key, how does the TV find the next focus](https://juejin.cn/post/7199666255883927612)
 
+[How to simulate the background image style of css in canvas](https://juejin.cn/post/7204854015463538744)
+
 ## Special Note
 
 This project is rough and has not been thoroughly tested, its features are not
diff --git a/web/src/pages/Doc/en/introduction/index.vue b/web/src/pages/Doc/en/introduction/index.vue
index 1a760eaf..2551127b 100644
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -49,6 +49,7 @@ full screen, support mini map</li>
 <p><a href="https://juejin.cn/post/6987711560521089061">Technical Analysis of Web Mind Map Implementation (chi)</a></p>
 <p><a href="https://juejin.cn/post/7157681502506090510">Only a hundred lines of code are needed to add local file operation capability to your Web page. Are you sure not to try?</a></p>
 <p><a href="https://juejin.cn/post/7199666255883927612">When you press the direction key, how does the TV find the next focus</a></p>
+<p><a href="https://juejin.cn/post/7204854015463538744">How to simulate the background image style of css in canvas</a></p>
 <h2>Special Note</h2>
 <p>This project is rough and has not been thoroughly tested, its features are not
 yet fully developed, and there are some performance issues, especially when the number of nodes is large. It is only for
diff --git a/web/src/pages/Doc/en/node/index.md b/web/src/pages/Doc/en/node/index.md
index 9e27e173..2562df9d 100644
--- a/web/src/pages/Doc/en/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@@ -121,7 +121,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
 
-### setText(text)
+### setText(text, richText)
+
+- `richText`: v0.4.2+，`Boolean`, If you want to set rich text content, that is, `html` character, `richText` needs to be passed `true`
 
 Setting the node text, a shortcut for the `SET_NODE_TEXT` command
 
diff --git a/web/src/pages/Doc/en/node/index.vue b/web/src/pages/Doc/en/node/index.vue
index 82e713f5..59125afe 100644
--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@@ -67,7 +67,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</p>
-<h3>setText(text)</h3>
+<h3>setText(text, richText)</h3>
+<ul>
+<li><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></li>
+</ul>
 <p>Setting the node text, a shortcut for the <code>SET_NODE_TEXT</code> command</p>
 <h3>setImage(imgData)</h3>
 <p>Setting the node image, a shortcut for the <code>SET_NODE_IMAGE</code> command</p>
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index 396ddc66..5b85076a 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.4.2
+
+新增：`Node`类的`setText`方法增加第二个参数，以支持设置富文本内容。
+
 ## 0.4.1
 
 新增：1.新增抛出节点鼠标移入和移除事件；2.节点富文本支持设置背景颜色；3.节点富文本支持清除样式。
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index 67591a02..523eec29 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.4.2</h2>
+<p>新增：<code>Node</code>类的<code>setText</code>方法增加第二个参数，以支持设置富文本内容。</p>
 <h2>0.4.1</h2>
 <p>新增：1.新增抛出节点鼠标移入和移除事件；2.节点富文本支持设置背景颜色；3.节点富文本支持清除样式。</p>
 <p>修复：1.Mac系统触控板缩放相反的问题；2.设备window.devicePixelRatio不为1时，当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。</p>
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index aed46ad6..a9c873c1 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -252,40 +252,40 @@ mindMap.updateConfig({
 
 执行命令，每执行一个命令就会在历史堆栈里添加一条记录用于回退或前进。所有命令如下：
 
-| 命令名称                              | 描述                                                       | 参数                                                                                                                                                                                                                                                                       |
-| --------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| SELECT_ALL                        | 全选                                                       |                                                                                                                                                                                                                                                                          |
-| BACK                              | 回退指定的步数                                                  | step（要回退的步数，默认为1）                                                                                                                                                                                                                                                        |
-| FORWARD                           | 前进指定的步数                                                  | step（要前进的步数，默认为1）                                                                                                                                                                                                                                                        |
-| INSERT_NODE                       | 插入同级节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效                   |                                                                                                                                                                                                                                                                          |
-| INSERT_CHILD_NODE                 | 插入子节点，操作节点为当前激活的节点                                       |                                                                                                                                                                                                                                                                          |
-| UP_NODE                           | 上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效 |                                                                                                                                                                                                                                                                          |
-| DOWN_NODE                         | 操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效     |                                                                                                                                                                                                                                                                          |
-| REMOVE_NODE                       | 删除节点，操作节点为当前激活的节点                                        |                                                                                                                                                                                                                                                                          |
-| PASTE_NODE                        | 粘贴节点到节点，操作节点为当前激活的节点                                     | data（要粘贴的节点数据，一般通过`renderer.copyNode()`方法和`renderer.cutNode()`方法获取）                                                                                                                                                                                                      |
-| CUT_NODE                          | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效            | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回)                                                                                                                                                                                                                                    |
-| SET_NODE_STYLE                    | 修改节点样式                                                   | node（要设置样式的节点）、prop（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式）                                                                                                                                                                                                       |
-| SET_NODE_ACTIVE                   | 设置节点是否激活                                                 | node（要设置的节点）、active（布尔值，是否激活）                                                                                                                                                                                                                                            |
-| CLEAR_ACTIVE_NODE                 | 清除当前已激活节点的激活状态，操作节点为当前激活的节点                              |                                                                                                                                                                                                                                                                          |
-| SET_NODE_EXPAND                   | 设置节点是否展开                                                 | node（要设置的节点）、expand（布尔值，是否展开）                                                                                                                                                                                                                                            |
-| EXPAND_ALL                        | 展开所有节点                                                   |                                                                                                                                                                                                                                                                          |
-| UNEXPAND_ALL                      | 收起所有节点                                                   |                                                                                                                                                                                                                                                                          |
-| UNEXPAND_TO_LEVEL（v0.2.8+）        | 展开到指定层级                                                  | level（要展开到的层级，1、2、3...）                                                                                                                                                                                                                                                  |
-| SET_NODE_DATA                     | 更新节点数据，即更新节点数据对象里`data`对象的数据                             | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`）                                                                                                                                                                                                                           |
-| SET_NODE_TEXT                     | 设置节点文本                                                   | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`）                                                                                                                                                                                                                                  |
-| SET_NODE_IMAGE                    | 设置节点图片                                                   | node（要设置的节点）、imgData（对象，图片信息，结构为：`{url, title, width, height}`，图片的宽高必须要传）                                                                                                                                                                                                |
-| SET_NODE_ICON                     | 设置节点图标                                                   | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[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)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
-| SET_NODE_HYPERLINK                | 设置节点超链接                                                  | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选）                                                                                                                                                                                                                                 |
-| SET_NODE_NOTE                     | 设置节点备注                                                   | node（要设置的节点）、note（备注文字）                                                                                                                                                                                                                                                  |
-| SET_NODE_TAG                      | 设置节点标签                                                   | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[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+）             | 将节点移动到另一个节点的后面                                           | node（要移动的节点）、 exist（目标节点）                                                                                                                                                                                                                                                |
-| INSERT_BEFORE（v0.1.5+）            | 将节点移动到另一个节点的前面                                           | node（要移动的节点）、 exist（目标节点）                                                                                                                                                                                                                                                |
-| MOVE_NODE_TO（v0.1.5+）             | 移动一个节点作为另一个节点的子节点                                        | node（要移动的节点）、 toNode（目标节点）                                                                                                                                                                                                                                               |
-| ADD_GENERALIZATION（v0.2.0+）       | 添加节点概要                                                   | data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}）                                                                                                                                                                                                                               |
-| REMOVE_GENERALIZATION（v0.2.0+）    | 删除节点概要                                                   |                                                                                                                                                                                                                                                                          |
-| SET_NODE_CUSTOM_POSITION（v0.2.0+） | 设置节点自定义位置                                                | node（要设置的节点）、 left（自定义的x坐标，默认为undefined）、 top（自定义的y坐标，默认为undefined）                                                                                                                                                                                                      |
-| RESET_LAYOUT（v0.2.0+）             | 一键整理布局                                                   |                                                                                                                                                                                                                                                                          |
-| SET_NODE_SHAPE（v0.2.4+）           | 设置节点形状                                                   | node（要设置的节点）、shape（形状，全部形状：https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js）                                                                                                                                                                  |
+| 命令名称                            | 描述                                                         | 参数                                                         |
+| ----------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| SELECT_ALL                          | 全选                                                         |                                                              |
+| BACK                                | 回退指定的步数                                               | step（要回退的步数，默认为1）                                |
+| FORWARD                             | 前进指定的步数                                               | step（要前进的步数，默认为1）                                |
+| INSERT_NODE                         | 插入同级节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效 |                                                              |
+| INSERT_CHILD_NODE                   | 插入子节点，操作节点为当前激活的节点                         |                                                              |
+| UP_NODE                             | 上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效 |                                                              |
+| DOWN_NODE                           | 操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效 |                                                              |
+| REMOVE_NODE                         | 删除节点，操作节点为当前激活的节点                           |                                                              |
+| PASTE_NODE                          | 粘贴节点到节点，操作节点为当前激活的节点                     | data（要粘贴的节点数据，一般通过`renderer.copyNode()`方法和`renderer.cutNode()`方法获取） |
+| CUT_NODE                            | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) |
+| SET_NODE_STYLE                      | 修改节点样式                                                 | node（要设置样式的节点）、prop（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式） |
+| SET_NODE_ACTIVE                     | 设置节点是否激活                                             | node（要设置的节点）、active（布尔值，是否激活）             |
+| CLEAR_ACTIVE_NODE                   | 清除当前已激活节点的激活状态，操作节点为当前激活的节点       |                                                              |
+| SET_NODE_EXPAND                     | 设置节点是否展开                                             | node（要设置的节点）、expand（布尔值，是否展开）             |
+| EXPAND_ALL                          | 展开所有节点                                                 |                                                              |
+| UNEXPAND_ALL                        | 收起所有节点                                                 |                                                              |
+| UNEXPAND_TO_LEVEL（v0.2.8+）        | 展开到指定层级                                               | level（要展开到的层级，1、2、3...）                          |
+| SET_NODE_DATA                       | 更新节点数据，即更新节点数据对象里`data`对象的数据           | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`） |
+| SET_NODE_TEXT                       | 设置节点文本                                                 | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为`true`） |
+| SET_NODE_IMAGE                      | 设置节点图片                                                 | node（要设置的节点）、imgData（对象，图片信息，结构为：`{url, title, width, height}`，图片的宽高必须要传） |
+| SET_NODE_ICON                       | 设置节点图标                                                 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[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)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
+| SET_NODE_HYPERLINK                  | 设置节点超链接                                               | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选） |
+| SET_NODE_NOTE                       | 设置节点备注                                                 | node（要设置的节点）、note（备注文字）                       |
+| SET_NODE_TAG                        | 设置节点标签                                                 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[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+）             | 将节点移动到另一个节点的后面                                 | node（要移动的节点）、 exist（目标节点）                     |
+| INSERT_BEFORE（v0.1.5+）            | 将节点移动到另一个节点的前面                                 | node（要移动的节点）、 exist（目标节点）                     |
+| MOVE_NODE_TO（v0.1.5+）             | 移动一个节点作为另一个节点的子节点                           | node（要移动的节点）、 toNode（目标节点）                    |
+| ADD_GENERALIZATION（v0.2.0+）       | 添加节点概要                                                 | data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}） |
+| REMOVE_GENERALIZATION（v0.2.0+）    | 删除节点概要                                                 |                                                              |
+| SET_NODE_CUSTOM_POSITION（v0.2.0+） | 设置节点自定义位置                                           | node（要设置的节点）、 left（自定义的x坐标，默认为undefined）、 top（自定义的y坐标，默认为undefined） |
+| RESET_LAYOUT（v0.2.0+）             | 一键整理布局                                                 |                                                              |
+| SET_NODE_SHAPE（v0.2.4+）           | 设置节点形状                                                 | node（要设置的节点）、shape（形状，全部形状：https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js） |
 
 ### setData(data)
 
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 3e1e0bc5..7778b81f 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -560,7 +560,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <tr>
 <td>SET_NODE_TEXT</td>
 <td>设置节点文本</td>
-<td>node（要设置的节点）、text（要设置的文本字符串，换行可以使用<code>\n</code>）</td>
+<td>node（要设置的节点）、text（要设置的文本字符串，换行可以使用<code>\n</code>）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为<code>true</code>）</td>
 </tr>
 <tr>
 <td>SET_NODE_IMAGE</td>
diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md
index a7745550..d007e99d 100644
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -51,6 +51,8 @@
 
 [当你按下方向键，电视是如何寻找下一个焦点的](https://juejin.cn/post/7199666255883927612)
 
+[如何在canvas中模拟css的背景图片样式](https://juejin.cn/post/7204854015463538744)
+
 ## 特别说明
 
 本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，尤其当节点数量比较庞大的时候，仅用于学习和参考，请谨慎用于实际项目。
diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue
index 5865cf7f..59f1f4e1 100644
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -38,6 +38,7 @@
 <p><a href="https://juejin.cn/post/6987711560521089061">Web思维导图实现的技术点分析</a></p>
 <p><a href="https://juejin.cn/post/7157681502506090510">只需百来行代码，为你的Web页面增加本地文件操作能力，确定不试试吗？</a></p>
 <p><a href="https://juejin.cn/post/7199666255883927612">当你按下方向键，电视是如何寻找下一个焦点的</a></p>
+<p><a href="https://juejin.cn/post/7204854015463538744">如何在canvas中模拟css的背景图片样式</a></p>
 <h2>特别说明</h2>
 <p>本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，尤其当节点数量比较庞大的时候，仅用于学习和参考，请谨慎用于实际项目。</p>
 <p>项目内置的主题和图标来自于：</p>
diff --git a/web/src/pages/Doc/zh/node/index.md b/web/src/pages/Doc/zh/node/index.md
index bcb1e7c3..517f1ef0 100644
--- a/web/src/pages/Doc/zh/node/index.md
+++ b/web/src/pages/Doc/zh/node/index.md
@@ -114,7 +114,9 @@
 
 设置节点数据，`SET_NODE_DATA`命令的快捷方法
 
-### setText(text)
+### setText(text, richText)
+
+- `richText`：v0.4.2+，`Boolean`，如果要设置的是富文本内容，也就是`html`字符，`richText`需要传`true`
 
 设置节点文本，`SET_NODE_TEXT`命令的快捷方法
 
diff --git a/web/src/pages/Doc/zh/node/index.vue b/web/src/pages/Doc/zh/node/index.vue
index d4d44a06..a215a587 100644
--- a/web/src/pages/Doc/zh/node/index.vue
+++ b/web/src/pages/Doc/zh/node/index.vue
@@ -60,7 +60,10 @@
 <p>获取该节点真实数据<code>nodeData</code>的<code>data</code>对象里的指定值，<code>key</code>不传返回这个<code>data</code>对象</p>
 <h3>setData(data)</h3>
 <p>设置节点数据，<code>SET_NODE_DATA</code>命令的快捷方法</p>
-<h3>setText(text)</h3>
+<h3>setText(text, richText)</h3>
+<ul>
+<li><code>richText</code>：v0.4.2+，<code>Boolean</code>，如果要设置的是富文本内容，也就是<code>html</code>字符，<code>richText</code>需要传<code>true</code></li>
+</ul>
 <p>设置节点文本，<code>SET_NODE_TEXT</code>命令的快捷方法</p>
 <h3>setImage(imgData)</h3>
 <p>设置节点图片，<code>SET_NODE_IMAGE</code>命令的快捷方法</p>