diff --git a/simple-mind-map/src/RichText.js b/simple-mind-map/src/RichText.js index 4e2433e3..227f701e 100644 --- a/simple-mind-map/src/RichText.js +++ b/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 } from './utils' +import { walk, getTextFromHtml } 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 = div.textContent + node.data.text = getTextFromHtml(node.data.text) // 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) diff --git a/simple-mind-map/src/Style.js b/simple-mind-map/src/Style.js index b0f95fd3..6f10526e 100644 --- a/simple-mind-map/src/Style.js +++ b/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 { diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js index 476cb974..050a342e 100644 --- a/simple-mind-map/src/utils/index.js +++ b/simple-mind-map/src/utils/index.js @@ -332,4 +332,14 @@ export const checkNodeOuter = (mindMap, node) => { offsetLeft, offsetTop } +} + +// 提取html字符串里的纯文本 +let getTextFromHtmlEl = null +export const getTextFromHtml = (html) => { + if (!getTextFromHtmlEl) { + getTextFromHtmlEl = document.createElement('div') + } + getTextFromHtmlEl.innerHTML = html + return getTextFromHtmlEl.textContent } \ No newline at end of file diff --git a/simple-mind-map/src/utils/nodeCreateContents.js b/simple-mind-map/src/utils/nodeCreateContents.js index 4e729947..ba305df8 100644 --- a/simple-mind-map/src/utils/nodeCreateContents.js +++ b/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 = `
${text}
` + } let html = `