Feature：节点富文本编辑支持清除文字样式

simple-mind-map/src/RichText.js

@@ -229,17 +229,22 @@ class RichText {
   }
 
   // 格式化当前选中的文本
-  formatText(config = {}) {
+  formatText(config = {}, clear = false) {
     if (!this.range && !this.lastRange) return
-    this.syncFormatToNodeConfig(config)
+    this.syncFormatToNodeConfig(config, clear)
     let rangeLost = !this.range
     let range = rangeLost ? this.lastRange : this.range
-    this.quill.formatText(range.index, range.length, config)
+    clear ? this.quill.removeFormat(range.index, range.length) : this.quill.formatText(range.index, range.length, config)
     if (rangeLost) {
       this.quill.setSelection(this.lastRange.index, this.lastRange.length)
     }
   }
 
+  // 清除当前选中文本的样式
+  removeFormat() {
+    this.formatText({}, true)
+  }
+
   // 格式化指定范围的文本
   formatRangeText(range, config = {}) {
     if (!range) return
@@ -254,10 +259,17 @@ class RichText {
   }
 
   // 同步格式化到节点样式配置
-  syncFormatToNodeConfig(config) {
+  syncFormatToNodeConfig(config, clear) {
     if (!this.node) return
-    let data = this.richTextStyleToNormalStyle(config)
-    this.mindMap.renderer.setNodeData(this.node, data)
+    if (clear) {
+      // 清除文本样式
+      ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textDecoration', 'color'].forEach((prop) => {
+        delete this.node.nodeData.data[prop]
+      })
+    } else {
+      let data = this.richTextStyleToNormalStyle(config)
+      this.mindMap.renderer.setNodeData(this.node, data)
+    }
   }
 
   // 将普通节点样式对象转换成富文本样式对象

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

@@ -2,7 +2,7 @@
 
 ## 0.4.1
 
-New: Add and throw node mouseenter and mouseleave events.
+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.
 
 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.
 

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

@@ -2,7 +2,7 @@
   <div>
     <h1>Changelog</h1>
 <h2>0.4.1</h2>
-<p>New: Add and throw node mouseenter and mouseleave events.</p>
+<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>
 <h2>0.4.0</h2>
 <p>New: The node supports rich text editing.</p>

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

@@ -104,6 +104,12 @@ Formats the text of the specified range.
 
 Formats all text of the current edit node.
 
+### removeFormat()
+
+> v0.4.1+
+
+Clears the style of the currently selected text.
+
 ### normalStyleToRichTextStyle(style) 
 
 Converts a normal node style object to a rich text style object. Because there are differences between node style attributes and rich text style attributes during non-rich text editing, a conversion operation is required. For example:

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

@@ -83,6 +83,11 @@ MindMap.usePlugin(RichText, opt?)
 <li><code>config</code>：Same as <code>formatText</code> method</li>
 </ul>
 <p>Formats all text of the current edit node.</p>
+<h3>removeFormat()</h3>
+<blockquote>
+<p>v0.4.1+</p>
+</blockquote>
+<p>Clears the style of the currently selected text.</p>
 <h3>normalStyleToRichTextStyle(style)</h3>
 <p>Converts a normal node style object to a rich text style object. Because there are differences between node style attributes and rich text style attributes during non-rich text editing, a conversion operation is required. For example:</p>
 <pre class="hljs"><code>{

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

@@ -2,7 +2,7 @@
 
 ## 0.4.1
 
-新增：新增抛出节点鼠标移入和移除事件。
+新增：1.新增抛出节点鼠标移入和移除事件；2.节点富文本支持设置背景颜色；3.节点富文本支持清除样式。
 
 修复：1.Mac系统触控板缩放相反的问题；2.设备window.devicePixelRatio不为1时，当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。
 

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

@@ -2,7 +2,7 @@
   <div>
     <h1>Changelog</h1>
 <h2>0.4.1</h2>
-<p>新增：新增抛出节点鼠标移入和移除事件。</p>
+<p>新增：1.新增抛出节点鼠标移入和移除事件；2.节点富文本支持设置背景颜色；3.节点富文本支持清除样式。</p>
 <p>修复：1.Mac系统触控板缩放相反的问题；2.设备window.devicePixelRatio不为1时，当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。</p>
 <h2>0.4.0</h2>
 <p>新增：节点支持富文本编辑。</p>

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

@@ -104,6 +104,12 @@ MindMap.usePlugin(RichText, opt?)
 
 格式化当前编辑节点的所有文本。
 
+### removeFormat()
+
+> v0.4.1+
+
+清除当前选中文本的样式。
+
 ### normalStyleToRichTextStyle(style) 
 
 将普通节点样式对象转换成富文本样式对象。因为非富文本编辑时的节点样式属性和富文本样式属性是存在差异的，所以需要一个转换操作。比如：

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

@@ -83,6 +83,11 @@ MindMap.usePlugin(RichText, opt?)
 <li><code>config</code>：同<code>formatText</code>方法</li>
 </ul>
 <p>格式化当前编辑节点的所有文本。</p>
+<h3>removeFormat()</h3>
+<blockquote>
+<p>v0.4.1+</p>
+</blockquote>
+<p>清除当前选中文本的样式。</p>
 <h3>normalStyleToRichTextStyle(style)</h3>
 <p>将普通节点样式对象转换成富文本样式对象。因为非富文本编辑时的节点样式属性和富文本样式属性是存在差异的，所以需要一个转换操作。比如：</p>
 <pre class="hljs"><code>{

web/src/pages/Edit/components/RichTextToolbar.vue

@@ -99,6 +99,14 @@
         </div>
       </el-popover>
     </el-tooltip>
+    
+    <el-tooltip content="清除样式" placement="top">
+      <div
+        class="btn" @click="removeFormat"
+      >
+        <span class="icon iconfont iconqingchu"></span>
+      </div>
+    </el-tooltip>
   </div>
 </template>
 
@@ -207,6 +215,10 @@ export default {
       this.mindMap.richText.formatText({
         background
       })
+    },
+
+    removeFormat() {
+      this.mindMap.richText.removeFormat()
     }
   }
 }