Doc: update

2026-02-17 22:08:25 +08:00 · 2023-08-11 09:08:44 +08:00
parent c0aab1e921
commit c8dfbd3b87
24 changed files with 294 additions and 14 deletions
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.6.12",
+  "version": "0.6.13",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/simple-mind-map/src/core/render/Render.js
+++ b/simple-mind-map/src/core/render/Render.js
@@ -48,7 +48,7 @@ class Render {
    this.themeConfig = this.mindMap.themeConfig
    this.draw = this.mindMap.draw
    // 渲染树，操作过程中修改的都是这里的数据
-    this.renderTree = merge({},this.mindMap.opt.data || {})
+    this.renderTree = merge({}, this.mindMap.opt.data || {})
    // 是否重新渲染
    this.reRender = false
    // 是否正在渲染中
@@ -112,6 +112,13 @@ class Render {
    this.mindMap.on('paste', data => {
      this.onPaste(data)
    })
+    // let timer = null
+    // this.mindMap.on('view_data_change', () => {
+    //   clearTimeout(timer)
+    //   timer = setTimeout(() => {
+    //     this.render()
+    //   }, 300)
+    // })
  }

  //  注册命令
@@ -888,7 +895,7 @@ class Render {
    // 更新了连线的样式
    let props = Object.keys(style)
    let hasLineStyleProps = false
-    props.forEach((key) => {
+    props.forEach(key => {
      if (lineStyleProps.includes(key)) {
        hasLineStyleProps = true
      }
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/simple-mind-map/src/core/render/node/Node.js
@@ -97,6 +97,8 @@ class Node {
    this.isMultipleChoice = false
    // 是否需要重新layout
    this.needLayout = false
+    // 当前是否是隐藏状态
+    this.isHide = false
    // 概要相关方法
    Object.keys(nodeGeneralizationMethods).forEach(item => {
      this[item] = nodeGeneralizationMethods[item].bind(this)
@@ -367,7 +369,13 @@ class Node {
        })
      }
      this.group.add(this._unVisibleRectRegionNode)
-      this.renderer.layout.renderExpandBtnRect(this._unVisibleRectRegionNode, this.expandBtnSize, width, height, this)
+      this.renderer.layout.renderExpandBtnRect(
+        this._unVisibleRectRegionNode,
+        this.expandBtnSize,
+        width,
+        height,
+        this
+      )
    }
  }

@@ -475,9 +483,7 @@ class Node {
    if (!this.group) {
      return
    }
-    let {
-      alwaysShowExpandBtn
-    } = this.mindMap.opt
+    let { alwaysShowExpandBtn } = this.mindMap.opt
    if (alwaysShowExpandBtn) {
      // 需要移除展开收缩按钮
      if (this._expandBtn && this.nodeData.children.length <= 0) {
@@ -499,11 +505,48 @@ class Node {
    this.renderGeneralization()
    // 更新节点位置
    let t = this.group.transform()
+    // // 如果上次不在可视区内，且本次也不在，那么直接返回
+    // let { left: ox, top: oy } = this.getNodePosInClient(
+    //   t.translateX,
+    //   t.translateY
+    // )
+    // let oldIsInClient =
+    //   ox > 0 && oy > 0 && ox < this.mindMap.width && oy < this.mindMap.height
+    // let { left: nx, top: ny } = this.getNodePosInClient(this.left, this.top)
+    // let newIsNotInClient =
+    //   nx + this.width < 0 ||
+    //   ny + this.height < 0 ||
+    //   nx > this.mindMap.width ||
+    //   ny > this.mindMap.height
+    // if (!oldIsInClient && newIsNotInClient) {
+    //   if (!this.isHide) {
+    //     this.isHide = true
+    //     this.group.hide()
+    //   }
+    //   return
+    // }
+    // // 如果当前是隐藏状态，那么先显示
+    // if (this.isHide) {
+    //   this.isHide = false
+    //   this.group.show()
+    // }
    // 如果节点位置没有变化，则返回
    if (this.left === t.translateX && this.top === t.translateY) return
    this.group.translate(this.left - t.translateX, this.top - t.translateY)
  }

+  // 获取节点相当于画布的位置
+  getNodePosInClient(_left, _top) {
+    let drawTransform = this.mindMap.draw.transform()
+    let { scaleX, scaleY, translateX, translateY } = drawTransform
+    let left = _left * scaleX + translateX
+    let top = _top * scaleY + translateY
+    return {
+      left,
+      top
+    }
+  }
+
  // 重新渲染节点，即重新创建节点内容、计算节点大小、计算节点内容布局、更新展开收起按钮，概要及位置
  reRender() {
    let sizeChange = this.getSize()
--- a/simple-mind-map/src/core/view/View.js
+++ b/simple-mind-map/src/core/view/View.js
@@ -82,15 +82,20 @@ class View {
          // 鼠标滚轮，向上和向左，都是缩小
          case CONSTANTS.DIR.UP:
          case CONSTANTS.DIR.LEFT:
-            mousewheelZoomActionReverse ? this.enlarge(cx, cy, isTouchPad) : this.narrow(cx, cy, isTouchPad)
+            mousewheelZoomActionReverse
+              ? this.enlarge(cx, cy, isTouchPad)
+              : this.narrow(cx, cy, isTouchPad)
            break
          // 鼠标滚轮，向下和向右，都是放大
          case CONSTANTS.DIR.DOWN:
          case CONSTANTS.DIR.RIGHT:
-            mousewheelZoomActionReverse ? this.narrow(cx, cy, isTouchPad) : this.enlarge(cx, cy, isTouchPad)
+            mousewheelZoomActionReverse
+              ? this.narrow(cx, cy, isTouchPad)
+              : this.enlarge(cx, cy, isTouchPad)
            break
        }
-      } else {// 鼠标滚轮事件控制画布移动
+      } else {
+        // 鼠标滚轮事件控制画布移动
        let step = mousewheelMoveStep
        if (isTouchPad) {
          step = 5
@@ -147,6 +152,7 @@ class View {

  //  平移x,y方向
  translateXY(x, y) {
+    if (x === 0 && y === 0) return
    this.x += x
    this.y += y
    this.transform()
@@ -154,24 +160,28 @@ class View {

  //  平移x方向
  translateX(step) {
+    if (step === 0) return
    this.x += step
    this.transform()
  }

  //  平移x方式到
  translateXTo(x) {
+    if (x === 0) return
    this.x = x
    this.transform()
  }

  //  平移y方向
  translateY(step) {
+    if (step === 0) return
    this.y += step
    this.transform()
  }

  //  平移y方向到
  translateYTo(y) {
+    if (y === 0) return
    this.y = y
    this.transform()
  }
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,37 @@
 # Changelog

+## 0.6.13
+
+Fix: 
+
+> 1.Fix the issue of the inability to drag the canvas while holding down the middle mouse button on a node in read-only mode.
+>
+> 2.Fixed the issue of probabilistic error reporting after quickly dragging nodes several times.
+>
+> 3.Fix the issue of pulling up the input method during operations such as activating nodes on the mobile end, expanding and collapsing.
+>
+> 4.Fix the issue where an exception request is initiated when the background image in the theme configuration is none.
+
+New: 
+
+> 1.Mobile gesture scaling optimization: Scale according to a linear relationship, and adjust the canvas position with double finger displacement.
+>
+> 2.Remove the logic of asynchronous rendering nodes and improve the speed of creating new nodes.
+>
+> 3.The export of images has been changed from the html2canvas library to the dom to image more library to address the issue of missing text styles in exporting rich text nodes.
+>
+> 4.When a non rich text input box enters the editing state, it is deselected by default.
+>
+> 5.When there is an activation node, it supports automatically entering text editing mode when pressing the Chinese, numeric, or English buttons.
+
+Demo：
+
+> 1.Add anti shake operations when saving view data to optimize performance.
+>
+> 2.Some time-consuming operations add loading effects.
+>
+> 3.Improve the dark mode of right-click menus and rich text toolbars.
+
 ## 0.6.12

 Fix: 
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,28 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.6.13</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue of the inability to drag the canvas while holding down the middle mouse button on a node in read-only mode.</p>
+<p>2.Fixed the issue of probabilistic error reporting after quickly dragging nodes several times.</p>
+<p>3.Fix the issue of pulling up the input method during operations such as activating nodes on the mobile end, expanding and collapsing.</p>
+<p>4.Fix the issue where an exception request is initiated when the background image in the theme configuration is none.</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Mobile gesture scaling optimization: Scale according to a linear relationship, and adjust the canvas position with double finger displacement.</p>
+<p>2.Remove the logic of asynchronous rendering nodes and improve the speed of creating new nodes.</p>
+<p>3.The export of images has been changed from the html2canvas library to the dom to image more library to address the issue of missing text styles in exporting rich text nodes.</p>
+<p>4.When a non rich text input box enters the editing state, it is deselected by default.</p>
+<p>5.When there is an activation node, it supports automatically entering text editing mode when pressing the Chinese, numeric, or English buttons.</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.Add anti shake operations when saving view data to optimize performance.</p>
+<p>2.Some time-consuming operations add loading effects.</p>
+<p>3.Improve the dark mode of right-click menus and rich text toolbars.</p>
+</blockquote>
 <h2>0.6.12</h2>
 <p>Fix:</p>
 <blockquote>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -73,6 +73,9 @@ const mindMap = new MindMap({
 | 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 |          |
+| enableCreateHiddenInput（v0.6.13+）     | Boolean  | true | Is it allowed to create a hidden input box that will be focused when the node is activated for pasting data and automatically entering the text editing state |          |
+| enableAutoEnterTextEditWhenKeydown（v0.6.13+）     | Boolean  | true | Does it automatically enter text editing mode when pressing the Chinese, English, or numeric buttons when there is an activation node? This configuration takes effect when enableCreateHiddenInput is set to true |          |
+| richTextEditFakeInPlace（v0.6.13+）     | Boolean  | false | Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It should be noted that only when there is only text within the node and the shape is rectangular, can the effect be better |          |

 ### Watermark config

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -371,6 +371,27 @@
 <td>When dragging an element, the maximum height of the block indicating the new position of the element</td>
 <td></td>
 </tr>
+<tr>
+<td>enableCreateHiddenInput（v0.6.13+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>Is it allowed to create a hidden input box that will be focused when the node is activated for pasting data and automatically entering the text editing state</td>
+<td></td>
+</tr>
+<tr>
+<td>enableAutoEnterTextEditWhenKeydown（v0.6.13+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>Does it automatically enter text editing mode when pressing the Chinese, English, or numeric buttons when there is an activation node? This configuration takes effect when enableCreateHiddenInput is set to true</td>
+<td></td>
+</tr>
+<tr>
+<td>richTextEditFakeInPlace（v0.6.13+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It should be noted that only when there is only text within the node and the shape is rectangular, can the effect be better</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>
--- a/web/src/pages/Doc/en/keyCommand/index.md
+++ b/web/src/pages/Doc/en/keyCommand/index.md
@@ -58,4 +58,12 @@ Save the current registered shortcut data, then clear the shortcut data

 > v0.2.3+

-Restore saved shortcut data, then clear the cache data
+Restore saved shortcut data, then clear the cache data
+
+### hasCombinationKey(e)
+
+> v0.6.13+
+
+- `e`: Event object.
+
+Determine if the combination key has been pressed.
--- a/web/src/pages/Doc/en/keyCommand/index.vue
+++ b/web/src/pages/Doc/en/keyCommand/index.vue
@@ -46,6 +46,14 @@ the shortcut will be removed</p>
 <p>v0.2.3+</p>
 </blockquote>
 <p>Restore saved shortcut data, then clear the cache data</p>
+<h3>hasCombinationKey(e)</h3>
+<blockquote>
+<p>v0.6.13+</p>
+</blockquote>
+<ul>
+<li><code>e</code>: Event object.</li>
+</ul>
+<p>Determine if the combination key has been pressed.</p>

  </div>
 </template>
--- a/web/src/pages/Doc/en/richText/index.md
+++ b/web/src/pages/Doc/en/richText/index.md
@@ -14,7 +14,9 @@ The principle of this plugin is to use [Quill](https://github.com/quilljs/quill)
 >
 > This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting `svg` as an image is very simple, Get the `svg` string, and then create the `blob` data of the `type=image/svg+xml` type. Then use the `URL.createObjectURL` method to generate the `data:url` data. Then create a `Image` tag, use the `data:url` as the `src` of the image, and finally draw the image on the `canvas` object for export, However, after testing, when the `DOM` node is embedded in the `svg`, this method of export will cause errors, and after trying many ways, the perfect export effect cannot be achieved, The current method is to traverse the `foreignObject` node in `svg`, using [html2canvas](https://github.com/niklasvh/html2canvas) Convert the `DOM` node in the `foreignObject` node into an image and then replace the `foreignObject` node. This method can work, but it is very time-consuming. Because the `html2canvas` conversion takes a long time, it takes about 2 seconds to convert a node. This leads to the more nodes, the slower the conversion time. Therefore, it is recommended not to use this plugin if you cannot tolerate the long time of export.

-The version of `v0.5.7+` directly uses `html2canvas` to convert the entire `svg`, which is no longer an issue with speed. However, there is currently a bug where the color of the node does not take effect after export.
+> The version of `v0.5.7+` directly uses `html2canvas` to convert the entire `svg`, which is no longer an issue with speed. However, there is currently a bug where the color of the node does not take effect after export.
+
+`V0.6.13+` version uses [dom-to-image-more](https://github.com/1904labs/dom-to-image-more) Replaced 'html2canvas' to address the issue of ineffective color export for nodes.

 ## Register

--- a/web/src/pages/Doc/en/richText/index.vue
+++ b/web/src/pages/Doc/en/richText/index.vue
@@ -14,7 +14,10 @@
 <p>The following prompts exist in versions prior to v0.5.6:</p>
 <p>This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting <code>svg</code> as an image is very simple, Get the <code>svg</code> string, and then create the <code>blob</code> data of the <code>type=image/svg+xml</code> type. Then use the <code>URL.createObjectURL</code> method to generate the <code>data:url</code> data. Then create a <code>Image</code> tag, use the <code>data:url</code> as the <code>src</code> of the image, and finally draw the image on the <code>canvas</code> object for export, However, after testing, when the <code>DOM</code> node is embedded in the <code>svg</code>, this method of export will cause errors, and after trying many ways, the perfect export effect cannot be achieved, The current method is to traverse the <code>foreignObject</code> node in <code>svg</code>, using <a href="https://github.com/niklasvh/html2canvas">html2canvas</a> Convert the <code>DOM</code> node in the <code>foreignObject</code> node into an image and then replace the <code>foreignObject</code> node. This method can work, but it is very time-consuming. Because the <code>html2canvas</code> conversion takes a long time, it takes about 2 seconds to convert a node. This leads to the more nodes, the slower the conversion time. Therefore, it is recommended not to use this plugin if you cannot tolerate the long time of export.</p>
 </blockquote>
+<blockquote>
 <p>The version of <code>v0.5.7+</code> directly uses <code>html2canvas</code> to convert the entire <code>svg</code>, which is no longer an issue with speed. However, there is currently a bug where the color of the node does not take effect after export.</p>
+</blockquote>
+<p><code>V0.6.13+</code> version uses <a href="https://github.com/1904labs/dom-to-image-more">dom-to-image-more</a> Replaced 'html2canvas' to address the issue of ineffective color export for nodes.</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> RichText <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/RichText.js&#x27;</span>
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -244,6 +244,12 @@ Convert the rich text content of nodes in the form of `<p><span></span><p>` into

 Convert the wrapped text of `<br>` into node rich text content in the form of `<p><span></span><p>`.

+#### isMobile()
+
+> v0.6.13+
+
+Determine if it is a mobile environment.
+
 ## Simulate CSS background in Canvas

 Import:
--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@@ -174,6 +174,11 @@ and copying the <code>data</code> of the data object, example:</p>
 <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>
+<h4>isMobile()</h4>
+<blockquote>
+<p>v0.6.13+</p>
+</blockquote>
+<p>Determine if it is a mobile environment.</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.6.13
+
+修复：
+
+> 1.修复只读模式下鼠标中键按住节点无法拖动画布的问题。 
+>
+> 2.修复快速拖动节点几次后会概率性报错的问题。 
+>
+> 3.修复在移动端激活节点、展开收起时等操作时会拉起输入法的问题。
+>
+> 4.修复主题配置中背景图片为none时会发起一个异常请求的问题。
+
+新增：
+
+> 1.移动端手势缩放优化: 按线性关系进行缩放、双指位移可以调整画布位置。 
+>
+> 2.去掉异步渲染节点的逻辑，提升创建新节点的速度。 
+>
+> 3.导出图片由html2canvas库改为使用dom-to-image-more库，解决导出富文本节点文字样式丢失的问题。 
+>
+> 4.非富文本输入框进入编辑状态时取消默认全选。
+>
+> 5.存在一个激活节点时，支持按下中文、数字、英文按键时自动进入文本编辑模式。
+
+Demo：
+
+> 1.保存视图数据时增加防抖操作，优化性能。
+>
+> 2.一些耗时的操作添加loading效果。
+>
+> 3.完善右键菜单和富文本工具条的暗黑模式。
+
 ## 0.6.12

 修复：
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,28 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.6.13</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复只读模式下鼠标中键按住节点无法拖动画布的问题。</p>
+<p>2.修复快速拖动节点几次后会概率性报错的问题。</p>
+<p>3.修复在移动端激活节点、展开收起时等操作时会拉起输入法的问题。</p>
+<p>4.修复主题配置中背景图片为none时会发起一个异常请求的问题。</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.移动端手势缩放优化: 按线性关系进行缩放、双指位移可以调整画布位置。</p>
+<p>2.去掉异步渲染节点的逻辑，提升创建新节点的速度。</p>
+<p>3.导出图片由html2canvas库改为使用dom-to-image-more库，解决导出富文本节点文字样式丢失的问题。</p>
+<p>4.非富文本输入框进入编辑状态时取消默认全选。</p>
+<p>5.存在一个激活节点时，支持按下中文、数字、英文按键时自动进入文本编辑模式。</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.保存视图数据时增加防抖操作，优化性能。</p>
+<p>2.一些耗时的操作添加loading效果。</p>
+<p>3.完善右键菜单和富文本工具条的暗黑模式。</p>
+</blockquote>
 <h2>0.6.12</h2>
 <p>修复：</p>
 <blockquote>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -73,6 +73,9 @@ const mindMap = new MindMap({
 | mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）     | Boolean  | true | 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点 |          |
 | customInnerElsAppendTo（v0.6.12+）     | null/HTMLElement  | null | 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下 |          |
 | nodeDragPlaceholderMaxSize（v0.6.12+）     | Number  | 20 | 拖拽元素时，指示元素新位置的块的最大高度 |          |
+| enableCreateHiddenInput（v0.6.13+）     | Boolean  | true | 是否允许创建一个隐藏的输入框，该输入框会在节点激活时聚焦，用于粘贴数据和自动进入文本编辑状态 |          |
+| enableAutoEnterTextEditWhenKeydown（v0.6.13+）     | Boolean  | true | 是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式，该配置在enableCreateHiddenInput设为true时生效 |          |
+| richTextEditFakeInPlace（v0.6.13+）     | Boolean  | false | 设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果，需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果 |          |

 ### 水印配置

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -371,6 +371,27 @@
 <td>拖拽元素时，指示元素新位置的块的最大高度</td>
 <td></td>
 </tr>
+<tr>
+<td>enableCreateHiddenInput（v0.6.13+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>是否允许创建一个隐藏的输入框，该输入框会在节点激活时聚焦，用于粘贴数据和自动进入文本编辑状态</td>
+<td></td>
+</tr>
+<tr>
+<td>enableAutoEnterTextEditWhenKeydown（v0.6.13+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式，该配置在enableCreateHiddenInput设为true时生效</td>
+<td></td>
+</tr>
+<tr>
+<td>richTextEditFakeInPlace（v0.6.13+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果，需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>
--- a/web/src/pages/Doc/zh/keyCommand/index.md
+++ b/web/src/pages/Doc/zh/keyCommand/index.md
@@ -53,4 +53,12 @@ mindMap.keyCommand.addShortcut('Control+Enter', () => {})

 > v0.2.3+

-恢复保存的快捷键数据，然后清空缓存数据
+恢复保存的快捷键数据，然后清空缓存数据
+
+### hasCombinationKey(e)
+
+> v0.6.13+
+
+- `e`：事件对象。
+
+判断是否按下了组合键。
--- a/web/src/pages/Doc/zh/keyCommand/index.vue
+++ b/web/src/pages/Doc/zh/keyCommand/index.vue
@@ -41,6 +41,14 @@ mindMap.keyCommand.addShortcut(<span class="hljs-string">&#x27;Control+Enter&#x2
 <p>v0.2.3+</p>
 </blockquote>
 <p>恢复保存的快捷键数据，然后清空缓存数据</p>
+<h3>hasCombinationKey(e)</h3>
+<blockquote>
+<p>v0.6.13+</p>
+</blockquote>
+<ul>
+<li><code>e</code>：事件对象。</li>
+</ul>
+<p>判断是否按下了组合键。</p>

  </div>
 </template>
--- a/web/src/pages/Doc/zh/richText/index.md
+++ b/web/src/pages/Doc/zh/richText/index.md
@@ -14,7 +14,9 @@
 >
 > 这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将`svg`导出为图片的原理很简单，获取到`svg`字符串，然后创建为`type=image/svg+xml`类型的`blob`数据，再使用`URL.createObjectURL`方法生成`data:url`数据，再创建一个`Image`标签，将`data:url`作为该图片的`src`，最后再将这个图片绘制到`canvas`对象上进行导出，但是经过测试，当`svg`中嵌入了`DOM`节点，这种方式导出会出错，并且尝试了多种方式后都无法实现完美的导出效果，目前的方式是遍历`svg`中的`foreignObject`节点，使用[html2canvas](https://github.com/niklasvh/html2canvas)将`foreignObject`节点内的`DOM`节点转换为图片再替换掉`foreignObject`节点，这种方式可以工作，但是非常耗时，因为`html2canvas`转换一次的时间很长，导致转换一个节点都需要耗时差不多2秒，这样导致节点越多，转换时间越慢，所以如果无法忍受长时间的导出的话推荐不要使用该插件。

-`v0.5.7+`的版本直接使用`html2canvas`转换整个`svg`，速度不再是问题，但是目前存在一个`bug`，就是节点的颜色导出后不生效。
+> `v0.5.7+`的版本直接使用`html2canvas`转换整个`svg`，速度不再是问题，但是目前存在一个`bug`，就是节点的颜色导出后不生效。
+
+`v0.6.13+`版本使用[dom-to-image-more](https://github.com/1904labs/dom-to-image-more)替换了`html2canvas`，解决了节点的颜色导出后不生效的问题。

 ## 注册

--- a/web/src/pages/Doc/zh/richText/index.vue
+++ b/web/src/pages/Doc/zh/richText/index.vue
@@ -14,7 +14,10 @@
 <p>v0.5.6即以前的版本存在以下提示：</p>
 <p>这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将<code>svg</code>导出为图片的原理很简单，获取到<code>svg</code>字符串，然后创建为<code>type=image/svg+xml</code>类型的<code>blob</code>数据，再使用<code>URL.createObjectURL</code>方法生成<code>data:url</code>数据，再创建一个<code>Image</code>标签，将<code>data:url</code>作为该图片的<code>src</code>，最后再将这个图片绘制到<code>canvas</code>对象上进行导出，但是经过测试，当<code>svg</code>中嵌入了<code>DOM</code>节点，这种方式导出会出错，并且尝试了多种方式后都无法实现完美的导出效果，目前的方式是遍历<code>svg</code>中的<code>foreignObject</code>节点，使用<a href="https://github.com/niklasvh/html2canvas">html2canvas</a>将<code>foreignObject</code>节点内的<code>DOM</code>节点转换为图片再替换掉<code>foreignObject</code>节点，这种方式可以工作，但是非常耗时，因为<code>html2canvas</code>转换一次的时间很长，导致转换一个节点都需要耗时差不多2秒，这样导致节点越多，转换时间越慢，所以如果无法忍受长时间的导出的话推荐不要使用该插件。</p>
 </blockquote>
+<blockquote>
 <p><code>v0.5.7+</code>的版本直接使用<code>html2canvas</code>转换整个<code>svg</code>，速度不再是问题，但是目前存在一个<code>bug</code>，就是节点的颜色导出后不生效。</p>
+</blockquote>
+<p><code>v0.6.13+</code>版本使用<a href="https://github.com/1904labs/dom-to-image-more">dom-to-image-more</a>替换了<code>html2canvas</code>，解决了节点的颜色导出后不生效的问题。</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> RichText <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/RichText.js&#x27;</span>
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -239,6 +239,12 @@ copyNodeTree({}, node)

 将`<br>`换行的文本转换成`<p><span></span><p>`形式的节点富文本内容。

+#### isMobile()
+
+> v0.6.13+
+
+判断是否是移动端环境。
+
 ## 在canvas中模拟css的背景属性

 引入：
--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@@ -169,6 +169,11 @@
 <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>
+<h4>isMobile()</h4>
+<blockquote>
+<p>v0.6.13+</p>
+</blockquote>
+<p>判断是否是移动端环境。</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>