Doc: update

2026-02-17 14:04:47 +08:00 · 2023-08-07 17:54:56 +08:00
parent 4b59bec01c
commit 187c940e56
27 changed files with 433 additions and 15 deletions
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.6.11-fix.1",
+  "version": "0.6.12",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -33,6 +33,7 @@ let APIList = [
  'touchEvent',
  'nodeImgAdjust',
  'search',
+  'painter',
  'xmind',
  'markdown',
  'utils'
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,49 @@
 # Changelog

+## 0.6.12
+
+Fix: 
+  
+> 1.Fix the issue where the indicator in the mini map will also move out of the mini map area when the mind map is completely moved out of the visible area.
+>
+> 2.Fix the issue of overly sensitive dual finger scaling on the mobile end.
+>
+> 3.Fix the issue of holding down nodes while dragging the canvas in read-only mode.
+>
+> 4.Fix the issue of incorrect rendering of the mini map when the distance between the mind map and the top left corner of the browser window is not 0.
+>
+> 5.Fix the issue of the prompt block being too large for the new location when moving nodes.
+>
+> 6.Fix the issue where search cannot be replaced with empty characters.
+>
+> 7.Fixed the issue of missing line breaks after searching and replacing in rich text mode.
+>
+> 8.Fixed the issue of missing focus in the input box when clicking on text editing in the outline.
+
+New:
+
+> 1.Adding a callback parameter to the node move end event (node_drag) can obtain the uid of the move to the node.
+>
+> 2.Support specifying the location to which internal elements are added through configuration.
+>
+> 3.Support the format brush function.
+>
+> 4.Under the curve style, the connection line style of the root node supports consistency with other nodes.
+>
+> 5.Search supports continuous replacement.
+>
+> 6.Add and delete button for node image.
+>
+> 7.Support dragging the canvas while holding down the middle mouse button.
+
+Demo:
+
+> 1.Provide an application takeover mode to facilitate docking with one's own storage services; Supports setting static resource paths at runtime.
+>
+> 2.Refactoring outline: 1. No longer use the text style that comes with the node; 2. Support full screen editing of the outline; 3. The outline supports dragging and moving nodes; 4. The outline supports deleting nodes.
+>
+> 3.Fix the issue of interface dark mode not updating in the scenario of importing data.
+
 ## 0.6.11-fix.1

 Fix: 1.Fixed the issue of invisible editing when node text is white.
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,34 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.6.12</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue where the indicator in the mini map will also move out of the mini map area when the mind map is completely moved out of the visible area.</p>
+<p>2.Fix the issue of overly sensitive dual finger scaling on the mobile end.</p>
+<p>3.Fix the issue of holding down nodes while dragging the canvas in read-only mode.</p>
+<p>4.Fix the issue of incorrect rendering of the mini map when the distance between the mind map and the top left corner of the browser window is not 0.</p>
+<p>5.Fix the issue of the prompt block being too large for the new location when moving nodes.</p>
+<p>6.Fix the issue where search cannot be replaced with empty characters.</p>
+<p>7.Fixed the issue of missing line breaks after searching and replacing in rich text mode.</p>
+<p>8.Fixed the issue of missing focus in the input box when clicking on text editing in the outline.</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Adding a callback parameter to the node move end event (node_drag) can obtain the uid of the move to the node.</p>
+<p>2.Support specifying the location to which internal elements are added through configuration.</p>
+<p>3.Support the format brush function.</p>
+<p>4.Under the curve style, the connection line style of the root node supports consistency with other nodes.</p>
+<p>5.Search supports continuous replacement.</p>
+<p>6.Add and delete button for node image.</p>
+<p>7.Support dragging the canvas while holding down the middle mouse button.</p>
+</blockquote>
+<p>Demo:</p>
+<blockquote>
+<p>1.Provide an application takeover mode to facilitate docking with one's own storage services; Supports setting static resource paths at runtime.</p>
+<p>2.Refactoring outline: 1. No longer use the text style that comes with the node; 2. Support full screen editing of the outline; 3. The outline supports dragging and moving nodes; 4. The outline supports deleting nodes.</p>
+<p>3.Fix the issue of interface dark mode not updating in the scenario of importing data.</p>
+</blockquote>
 <h2>0.6.11-fix.1</h2>
 <p>Fix: 1.Fixed the issue of invisible editing when node text is white.</p>
 <h2>0.6.11</h2>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -72,6 +72,7 @@ const mindMap = new MindMap({
 | customCreateNodeContent（v0.6.3+）     |  Function/null | null | If `isUseCustomNodeContent` is set to `true`, then this option needs to be used to pass in a method that receives the node instance `node` as a parameter (if you want to obtain data for that node, you can use `node.nodeData.data`). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return `null` |          |
 | mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）     | Boolean  | true | Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas |          |
 | customInnerElsAppendTo（v0.6.12+）     | null/HTMLElement  | null | Specify the location where some internal elements (node text editing element, node note display element, associated line text editing element, node image adjustment button element) are added, and default to document.body |          |
+| nodeDragPlaceholderMaxSize（v0.6.12+）     | Number  | 20 | When dragging an element, the maximum height of the block indicating the new position of the element |          |

 ### Watermark config

@@ -248,6 +249,7 @@ Listen to an event. Event list:
 | svg_mouseenter（v0.5.1+）    | Triggered when the mouse moves into the SVG canvas   | e（event object）  |
 | svg_mouseleave（v0.5.1+）    | Triggered when the mouse moves out of the SVG canvas   | e（event object）  |
 | node_icon_click（v0.6.10+）    | Triggered when clicking on an icon within a node   | this（node instance）、item（Click on the icon name）、e（event object）  |
+| view_theme_change（v0.6.12+）    | Triggered after calling the setTheme method to set the theme   | theme（theme name）  |

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

@@ -327,7 +329,8 @@ redo. All commands are as follows:
 | 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 or appoint node will be the operation node      |  appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）                                                            |
 | 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_STYLE                     | Modify node single 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_STYLEs（v0.6.12+）       |  Modify multiple styles of nodes   | node（the node to set the style of）、style（Style object，key is style prop，value is style 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)  |
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -364,6 +364,13 @@
 <td>Specify the location where some internal elements (node text editing element, node note display element, associated line text editing element, node image adjustment button element) are added, and default to document.body</td>
 <td></td>
 </tr>
+<tr>
+<td>nodeDragPlaceholderMaxSize（v0.6.12+）</td>
+<td>Number</td>
+<td>20</td>
+<td>When dragging an element, the maximum height of the block indicating the new position of the element</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>
@@ -726,6 +733,11 @@ poor performance and should be used sparingly.</p>
 <td>Triggered when clicking on an icon within a node</td>
 <td>this（node instance）、item（Click on the icon name）、e（event object）</td>
 </tr>
+<tr>
+<td>view_theme_change（v0.6.12+）</td>
+<td>Triggered after calling the setTheme method to set the theme</td>
+<td>theme（theme name）</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
@@ -824,10 +836,15 @@ redo. All commands are as follows:</p>
 </tr>
 <tr>
 <td>SET_NODE_STYLE</td>
-<td>Modify node style</td>
+<td>Modify node single style</td>
 <td>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)</td>
 </tr>
 <tr>
+<td>SET_NODE_STYLEs（v0.6.12+）</td>
+<td>Modify multiple styles of nodes</td>
+<td>node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（boolean, whether the style being set is for the active state）</td>
+</tr>
+<tr>
 <td>SET_NODE_ACTIVE</td>
 <td>Set whether the node is active</td>
 <td>node (the node to set), active (boolean, whether to activate)</td>
--- a/web/src/pages/Doc/en/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@@ -117,6 +117,12 @@ default `false`

 Modify a style of the node, a shortcut method for the `SET_NODE_STYLE` command

+### setStyles(style, isActive)
+
+> v0.6.12+
+
+Modify multiple styles of nodes, a shortcut method for the `SET_NODE_STYLES` command
+
 ### getData(key)

 Get the specified value in the `data` object of the node's real data `nodeData`,
--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@@ -68,6 +68,11 @@
 default <code>false</code></p>
 <h3>setStyle(prop, value, isActive)</h3>
 <p>Modify a style of the node, a shortcut method for the <code>SET_NODE_STYLE</code> command</p>
+<h3>setStyles(style, isActive)</h3>
+<blockquote>
+<p>v0.6.12+</p>
+</blockquote>
+<p>Modify multiple styles of nodes, a shortcut method for the <code>SET_NODE_STYLES</code> command</p>
 <h3>getData(key)</h3>
 <p>Get the specified value in the <code>data</code> object of the node's real data <code>nodeData</code>,
 if <code>key</code> is not passed, return the <code>data</code> object</p>
--- a/web/src/pages/Doc/en/painter/index.md
+++ b/web/src/pages/Doc/en/painter/index.md
@@ -0,0 +1,35 @@
+# Painter plugin
+
+> v0.6.12+
+
+Node format brush plugin.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import Painter from 'simple-mind-map/src/plugins/Painter.js'
+MindMap.usePlugin(Painter)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.painter`.
+
+## Event
+
+> You can use mindMap.on('event name', () => {}) method to listen events.
+
+### painter_start
+
+The event of painter start.
+
+### painter_end
+
+The event of painter end.
+
+## Method
+
+### startPainter()
+
+Start painter.
+
+After calling this method, if there is currently an active node, the first active node will be taken as the specified node by default. After clicking on other nodes, the style of that node will be applied to the other nodes being clicked. When clicking on the canvas, the format brushing operation ends.
--- a/web/src/pages/Doc/en/painter/index.vue
+++ b/web/src/pages/Doc/en/painter/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h1>Painter plugin</h1>
+<blockquote>
+<p>v0.6.12+</p>
+</blockquote>
+<p>Node format brush plugin.</p>
+<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> Painter <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Painter.js&#x27;</span>
+MindMap.usePlugin(Painter)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.painter</code>.</p>
+<h2>Event</h2>
+<blockquote>
+<p>You can use mindMap.on('event name', () =&gt; {}) method to listen events.</p>
+</blockquote>
+<h3>painter_start</h3>
+<p>The event of painter start.</p>
+<h3>painter_end</h3>
+<p>The event of painter end.</p>
+<h2>Method</h2>
+<h3>startPainter()</h3>
+<p>Start painter.</p>
+<p>After calling this method, if there is currently an active node, the first active node will be taken as the specified node by default. After clicking on other nodes, the style of that node will be applied to the other nodes being clicked. When clicking on the canvas, the format brushing operation ends.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/search/index.md
+++ b/web/src/pages/Doc/en/search/index.md
@@ -45,10 +45,12 @@ Search for node content, which can be called repeatedly. Each call will search a

 End search.

-### replace(replaceText)
+### replace(replaceText, jumpNext = false)

 - `replaceText`: Text to be replaced

+- `jumpNext`: v0.6.12+, Whether to automatically jump to the next matching node
+
 To replace the content of the current node, call the 'search' method after calling it to replace the content of the currently located matching node.

 ### replaceAll(replaceText)
--- a/web/src/pages/Doc/en/search/index.vue
+++ b/web/src/pages/Doc/en/search/index.vue
@@ -36,9 +36,14 @@ MindMap.usePlugin(Search)
 <p>Search for node content, which can be called repeatedly. Each call will search and locate to the next matching node. If the search text changes, it will be searched again.</p>
 <h3>endSearch()</h3>
 <p>End search.</p>
-<h3>replace(replaceText)</h3>
+<h3>replace(replaceText, jumpNext = false)</h3>
 <ul>
-<li><code>replaceText</code>: Text to be replaced</li>
+<li>
+<p><code>replaceText</code>: Text to be replaced</p>
+</li>
+<li>
+<p><code>jumpNext</code>: v0.6.12+, Whether to automatically jump to the next matching node</p>
+</li>
 </ul>
 <p>To replace the content of the current node, call the 'search' method after calling it to replace the content of the currently located matching node.</p>
 <h3>replaceAll(replaceText)</h3>
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -228,8 +228,22 @@ Determine whether a color is white.

 #### isTransparent(color)

+> v0.6.11+
+
 Determine whether a color is transparent.

+#### nodeRichTextToTextWithWrap(html)
+
+> v0.6.12+
+
+Convert the rich text content of nodes in the form of `<p><span></span><p>` into text wrapped in `<br>`.
+
+#### textToNodeRichTextWithWrap(html)
+
+> v0.6.12+
+
+Convert the wrapped text of `<br>` into node rich text content in the form of `<p><span></span><p>`.
+
 ## Simulate CSS background in Canvas

 Import:
--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@@ -160,7 +160,20 @@ and copying the <code>data</code> of the data object, example:</p>
 </blockquote>
 <p>Determine whether a color is white.</p>
 <h4>isTransparent(color)</h4>
+<blockquote>
+<p>v0.6.11+</p>
+</blockquote>
 <p>Determine whether a color is transparent.</p>
+<h4>nodeRichTextToTextWithWrap(html)</h4>
+<blockquote>
+<p>v0.6.12+</p>
+</blockquote>
+<p>Convert the rich text content of nodes in the form of <code>&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;</code> into text wrapped in <code>&lt;br&gt;</code>.</p>
+<h4>textToNodeRichTextWithWrap(html)</h4>
+<blockquote>
+<p>v0.6.12+</p>
+</blockquote>
+<p>Convert the wrapped text of <code>&lt;br&gt;</code> into node rich text content in the form of <code>&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;</code>.</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/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -50,6 +50,7 @@ export default [
      { path: 'touchEvent', title: 'TouchEvent插件' },
      { path: 'nodeImgAdjust', title: 'NodeImgAdjust插件' },
      { path: 'search', title: 'Search插件' },
+      { path: 'painter', title: 'Painter插件' },
      { path: 'help1', title: '概要/关联线' },
      { path: 'help2', title: '客户端' }
    ]
@@ -82,7 +83,8 @@ export default [
      { path: 'deploy', title: 'Deploy' },
      { path: 'touchEvent', title: 'TouchEvent plugin' },
      { path: 'nodeImgAdjust', title: 'NodeImgAdjust plugin' },
-      { path: 'search', title: 'Search plugin' }
+      { path: 'search', title: 'Search plugin' },
+      { path: 'painter', title: 'Painter plugin' }
    ]
  }
 ]
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,49 @@
 # Changelog

+## 0.6.12
+
+修复：
+  
+> 1.修复当思维导图全部移出可视区域后小地图中的指示器也会移出小地图区域的问题。
+>
+> 2.修复移动端双指缩放过于灵敏的问题。
+>
+> 3.修复只读模式下按住节点无法拖动画布的问题。
+>
+> 4.修复当思维导图距浏览器窗口左上角不为0时，小地图渲染不正确的问题。
+>
+> 5.修复移动节点时新位置的提示块过大的问题。
+>
+> 6.修复搜索不能替换为空字符的问题。
+>
+> 7.修复富文本模式下，搜索替换后换行会丢失的问题。
+>
+> 8.修复大纲里点击文字编辑时输入框焦点丢失的问题。
+
+新增：
+
+> 1.节点移动结束事件（node_dragend）增加回调参数，可以获取到移动到节点的uid。
+>
+> 2.支持通过配置指定内部一些元素添加到的位置。
+>
+> 3.支持格式刷功能。
+>
+> 4.曲线风格下，根节点的连接线样式支持和其他节点保持一致。
+>
+> 5.搜索支持连续替换。
+>
+> 6.节点图片新增删除按钮。
+>
+> 7.支持按住鼠标中键拖动画布。
+
+Demo：
+
+> 1.提供应用接管模式，方便对接自己的存储服务；支持运行时设置静态资源路径。
+>
+> 2.重构大纲：1.不再使用节点自带的文本样式；2.支持全屏编辑大纲；3.大纲支持拖拽移动节点；4.大纲支持删除节点。
+>
+> 3.修复导入数据场景下界面暗黑模式没有更新的问题。
+
 ## 0.6.11-fix.1

 修复：1.修复节点文字为白色时编辑的时候看不见的问题。
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,34 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.6.12</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复当思维导图全部移出可视区域后小地图中的指示器也会移出小地图区域的问题。</p>
+<p>2.修复移动端双指缩放过于灵敏的问题。</p>
+<p>3.修复只读模式下按住节点无法拖动画布的问题。</p>
+<p>4.修复当思维导图距浏览器窗口左上角不为0时，小地图渲染不正确的问题。</p>
+<p>5.修复移动节点时新位置的提示块过大的问题。</p>
+<p>6.修复搜索不能替换为空字符的问题。</p>
+<p>7.修复富文本模式下，搜索替换后换行会丢失的问题。</p>
+<p>8.修复大纲里点击文字编辑时输入框焦点丢失的问题。</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.节点移动结束事件（node_dragend）增加回调参数，可以获取到移动到节点的uid。</p>
+<p>2.支持通过配置指定内部一些元素添加到的位置。</p>
+<p>3.支持格式刷功能。</p>
+<p>4.曲线风格下，根节点的连接线样式支持和其他节点保持一致。</p>
+<p>5.搜索支持连续替换。</p>
+<p>6.节点图片新增删除按钮。</p>
+<p>7.支持按住鼠标中键拖动画布。</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.提供应用接管模式，方便对接自己的存储服务；支持运行时设置静态资源路径。</p>
+<p>2.重构大纲：1.不再使用节点自带的文本样式；2.支持全屏编辑大纲；3.大纲支持拖拽移动节点；4.大纲支持删除节点。</p>
+<p>3.修复导入数据场景下界面暗黑模式没有更新的问题。</p>
+</blockquote>
 <h2>0.6.11-fix.1</h2>
 <p>修复：1.修复节点文字为白色时编辑的时候看不见的问题。</p>
 <h2>0.6.11</h2>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -72,6 +72,7 @@ const mindMap = new MindMap({
 | customCreateNodeContent（v0.6.3+）     |  Function/null | null | 如果`isUseCustomNodeContent`设为`true`，那么需要使用该选项传入一个方法，接收节点实例`node`为参数（如果要获取该节点的数据，可以通过`node.nodeData.data`），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回`null`即可 |          |
 | mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）     | Boolean  | true | 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点 |          |
 | customInnerElsAppendTo（v0.6.12+）     | null/HTMLElement  | null | 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下 |          |
+| nodeDragPlaceholderMaxSize（v0.6.12+）     | Number  | 20 | 拖拽元素时，指示元素新位置的块的最大高度 |          |

 ### 水印配置

@@ -243,6 +244,7 @@ mindMap.setTheme('主题名称')
 | svg_mouseenter（v0.5.1+）    | 鼠标移入svg画布时触发   | e（事件对象）  |
 | svg_mouseleave（v0.5.1+）    | 鼠标移出svg画布时触发   | e（事件对象）  |
 | node_icon_click（v0.6.10+）    | 点击节点内的图标时触发   | this（节点实例）、item（点击的图标名称）、e（事件对象）  |
+| view_theme_change（v0.6.12+）    | 调用了setTheme方法设置主题后触发   | theme（设置的新主题名称）  |

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

@@ -320,7 +322,8 @@ mindMap.updateConfig({
 | REMOVE_NODE                         | 删除节点，操作节点为当前激活的节点或指定节点                         |   appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）                                                           |
 | PASTE_NODE                          | 粘贴节点到节点，操作节点为当前激活的节点                     | data（要粘贴的节点数据，一般通过`renderer.copyNode()`方法和`renderer.cutNode()`方法获取） |
 | CUT_NODE                            | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) |
-| SET_NODE_STYLE                      | 修改节点样式                                                 | node（要设置样式的节点）、prop（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式） |
+| SET_NODE_STYLE                      | 修改节点单个样式                                                 | node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式） |
+| SET_NODE_STYLEs（v0.6.12+）                      | 修改节点多个样式                                                 | node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（布尔值，是否设置的是激活状态的样式） |
 | SET_NODE_ACTIVE                     | 设置节点是否激活                                             | node（要设置的节点）、active（布尔值，是否激活）             |
 | CLEAR_ACTIVE_NODE                   | 清除当前已激活节点的激活状态，操作节点为当前激活的节点       |                                                              |
 | SET_NODE_EXPAND                     | 设置节点是否展开                                             | node（要设置的节点）、expand（布尔值，是否展开）             |
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -364,6 +364,13 @@
 <td>指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下</td>
 <td></td>
 </tr>
+<tr>
+<td>nodeDragPlaceholderMaxSize（v0.6.12+）</td>
+<td>Number</td>
+<td>20</td>
+<td>拖拽元素时，指示元素新位置的块的最大高度</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>
@@ -719,6 +726,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <td>点击节点内的图标时触发</td>
 <td>this（节点实例）、item（点击的图标名称）、e（事件对象）</td>
 </tr>
+<tr>
+<td>view_theme_change（v0.6.12+）</td>
+<td>调用了setTheme方法设置主题后触发</td>
+<td>theme（设置的新主题名称）</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
@@ -819,8 +831,13 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 </tr>
 <tr>
 <td>SET_NODE_STYLE</td>
-<td>修改节点样式</td>
-<td>node（要设置样式的节点）、prop（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
+<td>修改节点单个样式</td>
+<td>node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
+</tr>
+<tr>
+<td>SET_NODE_STYLEs（v0.6.12+）</td>
+<td>修改节点多个样式</td>
+<td>node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
 </tr>
 <tr>
 <td>SET_NODE_ACTIVE</td>
--- a/web/src/pages/Doc/zh/node/index.md
+++ b/web/src/pages/Doc/zh/node/index.md
@@ -116,6 +116,12 @@

 修改节点的某个样式，`SET_NODE_STYLE`命令的快捷方法

+### setStyles(style, isActive)
+
+> v0.6.12+
+
+修改节点多个样式，`SET_NODE_STYLES`命令的快捷方法
+
 ### getData(key)

 获取该节点真实数据`nodeData`的`data`对象里的指定值，`key`不传返回这个`data`对象
--- a/web/src/pages/Doc/zh/node/index.vue
+++ b/web/src/pages/Doc/zh/node/index.vue
@@ -67,6 +67,11 @@
 <p><code>isActive</code>：获取的是否是激活状态的样式值，默认<code>false</code></p>
 <h3>setStyle(prop, value, isActive)</h3>
 <p>修改节点的某个样式，<code>SET_NODE_STYLE</code>命令的快捷方法</p>
+<h3>setStyles(style, isActive)</h3>
+<blockquote>
+<p>v0.6.12+</p>
+</blockquote>
+<p>修改节点多个样式，<code>SET_NODE_STYLES</code>命令的快捷方法</p>
 <h3>getData(key)</h3>
 <p>获取该节点真实数据<code>nodeData</code>的<code>data</code>对象里的指定值，<code>key</code>不传返回这个<code>data</code>对象</p>
 <h3>setData(data)</h3>
--- a/web/src/pages/Doc/zh/painter/index.md
+++ b/web/src/pages/Doc/zh/painter/index.md
@@ -0,0 +1,35 @@
+# Painter 插件
+
+> v0.6.12+
+
+节点格式刷插件。
+
+## 注册
+
+```js
+import MindMap from 'simple-mind-map'
+import Painter from 'simple-mind-map/src/plugins/Painter.js'
+MindMap.usePlugin(Painter)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.painter`获取到该实例。
+
+## 事件
+
+> 可以通过mindMap.on('事件名称', () => {})来监听事件。
+
+### painter_start
+
+开始格式刷事件。
+
+### painter_end
+
+结束格式刷事件。
+
+## 方法
+
+### startPainter()
+
+开始格式刷。
+
+当调用了该方法后，如果当前存在激活节点，那么会默认取第一个激活的节点为指定节点，点击其他节点后，会把该节点的样式应用到被点击的其他节点，当点击画布后本次格式刷操作结束。
--- a/web/src/pages/Doc/zh/painter/index.vue
+++ b/web/src/pages/Doc/zh/painter/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h1>Painter 插件</h1>
+<blockquote>
+<p>v0.6.12+</p>
+</blockquote>
+<p>节点格式刷插件。</p>
+<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> Painter <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Painter.js&#x27;</span>
+MindMap.usePlugin(Painter)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.painter</code>获取到该实例。</p>
+<h2>事件</h2>
+<blockquote>
+<p>可以通过mindMap.on('事件名称', () =&gt; {})来监听事件。</p>
+</blockquote>
+<h3>painter_start</h3>
+<p>开始格式刷事件。</p>
+<h3>painter_end</h3>
+<p>结束格式刷事件。</p>
+<h2>方法</h2>
+<h3>startPainter()</h3>
+<p>开始格式刷。</p>
+<p>当调用了该方法后，如果当前存在激活节点，那么会默认取第一个激活的节点为指定节点，点击其他节点后，会把该节点的样式应用到被点击的其他节点，当点击画布后本次格式刷操作结束。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/search/index.md
+++ b/web/src/pages/Doc/zh/search/index.md
@@ -45,10 +45,12 @@ mindMap.on('search_info_change', (data) => {

 结束搜索。

-### replace(replaceText)
+### replace(replaceText, jumpNext = false)

 - `replaceText`：要进行替换的文本

+- `jumpNext`：v0.6.12+，是否自动跳转到下一个匹配节点
+
 替换当前节点内容，要在调用了`search`方法之后调用，会替换当前定位到的匹配节点内容。

 ### replaceAll(replaceText)
--- a/web/src/pages/Doc/zh/search/index.vue
+++ b/web/src/pages/Doc/zh/search/index.vue
@@ -36,9 +36,14 @@ MindMap.usePlugin(Search)
 <p>搜索节点内容，可以重复调用，每调一次，会搜索和定位到下一个匹配的节点。如果搜索文本改变了，那么会重新搜索。</p>
 <h3>endSearch()</h3>
 <p>结束搜索。</p>
-<h3>replace(replaceText)</h3>
+<h3>replace(replaceText, jumpNext = false)</h3>
 <ul>
-<li><code>replaceText</code>：要进行替换的文本</li>
+<li>
+<p><code>replaceText</code>：要进行替换的文本</p>
+</li>
+<li>
+<p><code>jumpNext</code>：v0.6.12+，是否自动跳转到下一个匹配节点</p>
+</li>
 </ul>
 <p>替换当前节点内容，要在调用了<code>search</code>方法之后调用，会替换当前定位到的匹配节点内容。</p>
 <h3>replaceAll(replaceText)</h3>
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -223,9 +223,21 @@ copyNodeTree({}, node)

 #### isTransparent(color)

+> v0.6.11+
+
 判断一个颜色是否是透明。

-> v0.6.11+
+#### nodeRichTextToTextWithWrap(html)
+
+> v0.6.12+
+
+将`<p><span></span><p>`形式的节点富文本内容转换成`<br>`换行的文本。
+
+#### textToNodeRichTextWithWrap(html)
+
+> v0.6.12+
+
+将`<br>`换行的文本转换成`<p><span></span><p>`形式的节点富文本内容。

 ## 在canvas中模拟css的背景属性

--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@@ -155,10 +155,20 @@
 </blockquote>
 <p>判断一个颜色是否是白色。</p>
 <h4>isTransparent(color)</h4>
-<p>判断一个颜色是否是透明。</p>
 <blockquote>
 <p>v0.6.11+</p>
 </blockquote>
+<p>判断一个颜色是否是透明。</p>
+<h4>nodeRichTextToTextWithWrap(html)</h4>
+<blockquote>
+<p>v0.6.12+</p>
+</blockquote>
+<p>将<code>&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;</code>形式的节点富文本内容转换成<code>&lt;br&gt;</code>换行的文本。</p>
+<h4>textToNodeRichTextWithWrap(html)</h4>
+<blockquote>
+<p>v0.6.12+</p>
+</blockquote>
+<p>将<code>&lt;br&gt;</code>换行的文本转换成<code>&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;</code>形式的节点富文本内容。</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>