diff --git a/simple-mind-map/src/RichText.js b/simple-mind-map/src/RichText.js index 2f240e85..be16d1d7 100644 --- a/simple-mind-map/src/RichText.js +++ b/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) + } } // 将普通节点样式对象转换成富文本样式对象 diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 289cf3bf..29facfd4 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/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. diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index f74b1cc1..0a87e95b 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -2,7 +2,7 @@

Changelog

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.

0.4.0

New: The node supports rich text editing.

diff --git a/web/src/pages/Doc/en/richText/index.md b/web/src/pages/Doc/en/richText/index.md index eed91c34..72bddcdd 100644 --- a/web/src/pages/Doc/en/richText/index.md +++ b/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: diff --git a/web/src/pages/Doc/en/richText/index.vue b/web/src/pages/Doc/en/richText/index.vue index daa9f0bf..742933c7 100644 --- a/web/src/pages/Doc/en/richText/index.vue +++ b/web/src/pages/Doc/en/richText/index.vue @@ -83,6 +83,11 @@ MindMap.usePlugin(RichText, opt?)
  • config:Same as formatText method
  • 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:

    {
    diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
    index d76dda63..396ddc66 100644
    --- a/web/src/pages/Doc/zh/changelog/index.md
    +++ b/web/src/pages/Doc/zh/changelog/index.md
    @@ -2,7 +2,7 @@
     
     ## 0.4.1
     
    -新增:新增抛出节点鼠标移入和移除事件。
    +新增:1.新增抛出节点鼠标移入和移除事件;2.节点富文本支持设置背景颜色;3.节点富文本支持清除样式。
     
     修复:1.Mac系统触控板缩放相反的问题;2.设备window.devicePixelRatio不为1时,当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。
     
    diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
    index ea399ff9..67591a02 100644
    --- a/web/src/pages/Doc/zh/changelog/index.vue
    +++ b/web/src/pages/Doc/zh/changelog/index.vue
    @@ -2,7 +2,7 @@
       

    Changelog

    0.4.1

    -

    新增:新增抛出节点鼠标移入和移除事件。

    +

    新增:1.新增抛出节点鼠标移入和移除事件;2.节点富文本支持设置背景颜色;3.节点富文本支持清除样式。

    修复:1.Mac系统触控板缩放相反的问题;2.设备window.devicePixelRatio不为1时,当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。

    0.4.0

    新增:节点支持富文本编辑。

    diff --git a/web/src/pages/Doc/zh/richText/index.md b/web/src/pages/Doc/zh/richText/index.md index 33957ffe..b3ccd0a8 100644 --- a/web/src/pages/Doc/zh/richText/index.md +++ b/web/src/pages/Doc/zh/richText/index.md @@ -104,6 +104,12 @@ MindMap.usePlugin(RichText, opt?) 格式化当前编辑节点的所有文本。 +### removeFormat() + +> v0.4.1+ + +清除当前选中文本的样式。 + ### normalStyleToRichTextStyle(style) 将普通节点样式对象转换成富文本样式对象。因为非富文本编辑时的节点样式属性和富文本样式属性是存在差异的,所以需要一个转换操作。比如: diff --git a/web/src/pages/Doc/zh/richText/index.vue b/web/src/pages/Doc/zh/richText/index.vue index 57eece28..9b179758 100644 --- a/web/src/pages/Doc/zh/richText/index.vue +++ b/web/src/pages/Doc/zh/richText/index.vue @@ -83,6 +83,11 @@ MindMap.usePlugin(RichText, opt?)
  • config:同formatText方法
  • 格式化当前编辑节点的所有文本。

    +

    removeFormat()

    +
    +

    v0.4.1+

    +
    +

    清除当前选中文本的样式。

    normalStyleToRichTextStyle(style)

    将普通节点样式对象转换成富文本样式对象。因为非富文本编辑时的节点样式属性和富文本样式属性是存在差异的,所以需要一个转换操作。比如:

    {
    diff --git a/web/src/pages/Edit/components/RichTextToolbar.vue b/web/src/pages/Edit/components/RichTextToolbar.vue
    index 0c2f426f..e2741289 100644
    --- a/web/src/pages/Edit/components/RichTextToolbar.vue
    +++ b/web/src/pages/Edit/components/RichTextToolbar.vue
    @@ -99,6 +99,14 @@
             
    + + +
    + +
    +
    @@ -207,6 +215,10 @@ export default { this.mindMap.richText.formatText({ background }) + }, + + removeFormat() { + this.mindMap.richText.removeFormat() } } }