Featyre：富文本模式下，导入数据、初始化数据、切换主题场景节点样式支持跟随主题变化

simple-mind-map/src/RichText.js

@@ -1,8 +1,7 @@
 import Quill from 'quill'
 import 'quill/dist/quill.snow.css'
 import html2canvas from 'html2canvas'
-import { Image as SvgImage } from '@svgdotjs/svg.js'
+import { walk, getTextFromHtml } from './utils'
-import { walk } from './utils'
 import { CONSTANTS } from './utils/constant'
 
 let extended = false
@@ -45,6 +44,11 @@ class RichText {
     this.initOpt()
     this.extendQuill()
     this.appendCss()
+
+    // 处理数据，转成富文本格式
+    if (this.mindMap.opt.data) {
+      this.mindMap.opt.data = this.handleSetData(this.mindMap.opt.data)
+    }
   }
 
   // 插入样式
@@ -427,15 +431,13 @@ class RichText {
 
   // 将所有节点转换成非富文本节点
   transformAllNodesToNormalNode() {
-    let div = document.createElement('div')
     walk(
       this.mindMap.renderer.renderTree,
       null,
       node => {
         if (node.data.richText) {
           node.data.richText = false
-          div.innerHTML = node.data.text
+          node.data.text = getTextFromHtml(node.data.text)
-          node.data.text = div.textContent
           // delete node.data.uid
         }
       },
@@ -453,7 +455,10 @@ class RichText {
   // 处理导入数据
   handleSetData(data) {
     let walk = (root) => {
-      root.data.richText = true
+      if (!root.data.richText) {
+        root.data.richText = true
+        root.data.resetRichText = true
+      }
       if (root.children && root.children.length > 0) {
         Array.from(root.children).forEach((item) => {
           walk(item)

simple-mind-map/src/Style.js

@@ -109,6 +109,18 @@ class Style {
       })
   }
 
+  // 生成内联样式
+  createStyleText() {
+    return `
+      color: ${this.merge('color')};
+      font-family: ${this.merge('fontFamily')};
+      font-size: ${this.merge('fontSize') + 'px'};
+      font-weight: ${this.merge('fontWeight')};
+      font-style: ${this.merge('fontStyle')};
+      text-decoration: ${this.merge('textDecoration')}
+    `
+  }
+
   // 获取文本样式
   getTextFontStyle() {
     return { 

simple-mind-map/src/utils/index.js

@@ -333,3 +333,13 @@ export const checkNodeOuter = (mindMap, node) => {
     offsetTop
   }
 }
+
+// 提取html字符串里的纯文本
+let getTextFromHtmlEl = null
+export const getTextFromHtml = (html) => {
+  if (!getTextFromHtmlEl) {
+    getTextFromHtmlEl = document.createElement('div')
+  }
+  getTextFromHtmlEl.innerHTML = html
+  return getTextFromHtmlEl.textContent
+}

simple-mind-map/src/utils/nodeCreateContents.js

@@ -1,6 +1,7 @@
-import { measureText, resizeImgSize } from '../utils'
+import { measureText, resizeImgSize, getTextFromHtml } from '../utils'
 import { Image, SVG, A, G, Rect, Text, ForeignObject } from '@svgdotjs/svg.js'
 import iconsSvg from '../svg/icons'
+import { CONSTANTS } from './constant'
 
 //  创建图片节点
 function createImgNode() {
@@ -52,6 +53,12 @@ function createIconNode() {
 // 创建富文本节点
 function createRichTextNode() {
   let g = new G()
+  // 重新设置富文本节点内容
+  if (this.nodeData.data.resetRichText || [CONSTANTS.CHANGE_THEME].includes(this.mindMap.renderer.renderSource)) {
+    delete this.nodeData.data.resetRichText
+    let text = getTextFromHtml(this.nodeData.data.text)
+    this.nodeData.data.text = `<p><span style="${this.style.createStyleText()}">${text}</span></p>`
+  }
   let html = `<div>${this.nodeData.data.text}</div>`
   let div = document.createElement('div')
   div.innerHTML = html