diff --git a/index.html b/index.html index 2e49ce9e..bea52da4 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -一个简单的web思维导图实现
\ No newline at end of file +一个简单的web思维导图实现
\ No newline at end of file diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index da5beaaa..737a2103 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -298,7 +298,11 @@ class MindMap { this.execCommand('CLEAR_ACTIVE_NODE') this.command.clearHistory() this.command.addHistory() - this.renderer.renderTree = data + if (this.richText) { + this.renderer.renderTree = this.richText.handleSetData(data) + } else { + this.renderer.renderTree = data + } this.reRender() } diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index d37349b2..1b5c38c4 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.5.6", + "version": "0.5.7", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/simple-mind-map/src/Export.js b/simple-mind-map/src/Export.js index aab5b1dc..245d8617 100644 --- a/simple-mind-map/src/Export.js +++ b/simple-mind-map/src/Export.js @@ -27,7 +27,7 @@ class Export { } // 获取svg数据 - async getSvgData(domToImage) { + async getSvgData() { let { exportPaddingX, exportPaddingY } = this.mindMap.opt let { svg, svgHTML } = this.mindMap.getSvgData({ paddingX: exportPaddingX, @@ -44,24 +44,14 @@ class Export { if (imageList.length > 0) { svgHTML = svg.svg() } - // 如果开启了富文本编辑，需要把svg中的dom元素转换成图片 - let nodeWithDomToImg = null - if (domToImage && this.mindMap.richText) { - let res = await this.mindMap.richText.handleSvgDomElements(svg) - if (res) { - nodeWithDomToImg = res.svg - svgHTML = res.svgHTML - } - } return { node: svg, - str: svgHTML, - nodeWithDomToImg + str: svgHTML } } // svg转png - svgToPng(svgSrc) { + svgToPng(svgSrc, transparent) { return new Promise((resolve, reject) => { const img = new Image() // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片 @@ -73,7 +63,9 @@ class Export { canvas.height = img.height + this.exportPadding * 2 let ctx = canvas.getContext('2d') // 绘制背景 - await this.drawBackgroundToCanvas(ctx, canvas.width, canvas.height) + if (!transparent) { + await this.drawBackgroundToCanvas(ctx, canvas.width, canvas.height) + } // 图片绘制到canvas里 ctx.drawImage( img, @@ -140,8 +132,14 @@ class Export { * 方法1.把svg的图片都转化成data:url格式，再转换 * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换 */ - async png() { - let { str } = await this.getSvgData(true) + async png(name, transparent = false) { + let { node, str } = await this.getSvgData() + // 如果开启了富文本，则使用htmltocanvas转换为图片 + if (this.mindMap.richText) { + let res = await this.mindMap.richText.handleExportPng(node.node) + let imgDataUrl = await this.svgToPng(res, transparent) + return imgDataUrl + } // 转换成blob数据 let blob = new Blob([str], { type: 'image/svg+xml' @@ -149,7 +147,7 @@ class Export { // 转换成data:url数据 let svgUrl = URL.createObjectURL(blob) // 绘制到canvas上 - let imgDataUrl = await this.svgToPng(svgUrl) + let imgDataUrl = await this.svgToPng(svgUrl, transparent) URL.revokeObjectURL(svgUrl) return imgDataUrl } @@ -209,15 +207,12 @@ class Export { } // 导出为svg - // domToImage：是否将svg中的dom节点转换成图片的形式 // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入 - async svg(name, domToImage = false, plusCssText) { - let { node, nodeWithDomToImg } = await this.getSvgData(domToImage) + async svg(name, plusCssText) { + let { node } = await this.getSvgData() // 开启了节点富文本编辑 if (this.mindMap.richText) { - if (domToImage) { - node = nodeWithDomToImg - } else if (plusCssText) { + if (plusCssText) { let foreignObjectList = node.find('foreignObject') if (foreignObjectList.length > 0) { foreignObjectList[0].add(SVG(``)) diff --git a/simple-mind-map/src/RichText.js b/simple-mind-map/src/RichText.js index f419f151..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) + } } // 插入样式 @@ -65,14 +69,15 @@ class RichText { .ql-container.ql-snow { border: none; } + + .smm-richtext-node-wrap p { + font-family: auto; + } + + .smm-richtext-node-edit-wrap p { + font-family: auto; + } ` - // .smm-richtext-node-wrap p { - // display: flex; - // } - - // .smm-richtext-node-edit-wrap p { - // display: flex; - // } this.styleEl = document.createElement('style') this.styleEl.type = 'text/css' this.styleEl.innerHTML = cssText @@ -130,36 +135,39 @@ class RichText { if (!rect) rect = node._textData.node.node.getBoundingClientRect() this.mindMap.emit('before_show_text_edit') this.mindMap.renderer.textEdit.registerTmpShortcut() - const paddingX = 5 - const paddingY = 3 + // 原始宽高 + let g = node._textData.node + let originWidth = g.attr('data-width') + let originHeight = g.attr('data-height') + // 缩放值 + let scaleX = rect.width / originWidth + let scaleY = rect.height / originHeight + // 内边距 + const paddingX = 6 + const paddingY = 4 if (!this.textEditNode) { this.textEditNode = document.createElement('div') this.textEditNode.classList.add('smm-richtext-node-edit-wrap') - this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;margin-left: -${paddingX}px;margin-top: -${paddingY}px;` + this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;` this.textEditNode.addEventListener('click', e => { e.stopPropagation() }) document.body.appendChild(this.textEditNode) } - // 原始宽高 - let g = node._textData.node - let originWidth = g.attr('data-width') - let originHeight = g.attr('data-height') // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见 let bgColor = node.style.merge('fillColor') + this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px` + this.textEditNode.style.marginTop = `-${paddingY * scaleY}px` this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px' this.textEditNode.style.minHeight = originHeight + 'px' - this.textEditNode.style.left = - rect.left + (rect.width - originWidth) / 2 + 'px' - this.textEditNode.style.top = - rect.top + (rect.height - originHeight) / 2 + 'px' + this.textEditNode.style.left = rect.left + 'px' + this.textEditNode.style.top = rect.top + 'px' this.textEditNode.style.display = 'block' this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px' - this.textEditNode.style.transform = `scale(${rect.width / originWidth}, ${ - rect.height / originHeight - })` + this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})` + this.textEditNode.style.transformOrigin = 'left top' if (!node.nodeData.data.richText) { // 还不是富文本的情况 let text = node.nodeData.data.text.split(/\n/gim).join('
') @@ -396,94 +404,40 @@ class RichText { return data } - // 将svg中嵌入的dom元素转换成图片 - async _handleSvgDomElements(svg) { - svg = svg.clone() - let foreignObjectList = svg.find('foreignObject') - let task = foreignObjectList.map(async item => { - let clone = item.first().node.cloneNode(true) - let div = document.createElement('div') - div.style.cssText = `position: fixed; left: -999999px;` - div.appendChild(clone) - this.mindMap.el.appendChild(div) - let canvas = await html2canvas(clone, { - backgroundColor: null - }) - this.mindMap.el.removeChild(div) - let imgNode = new SvgImage() - .load(canvas.toDataURL()) - .size(canvas.width, canvas.height) - item.replace(imgNode) - }) - await Promise.all(task) - return { - svg: svg, - svgHTML: svg.svg() + // 处理导出为图片 + async handleExportPng(node) { + let el = document.createElement('div') + el.style.position = 'absolute' + el.style.left = '-9999999px' + el.appendChild(node) + this.mindMap.el.appendChild(el) + // 遍历所有节点，将它们的margin和padding设为0 + let walk = (root) => { + root.style.margin = 0 + root.style.padding = 0 + if (root.hasChildNodes()) { + Array.from(root.children).forEach((item) => { + walk(item) + }) + } } - } - - // 将svg中嵌入的dom元素转换成图片 - handleSvgDomElements(svg) { - return new Promise((resolve, reject) => { - svg = svg.clone() - let foreignObjectList = svg.find('foreignObject') - let index = 0 - let len = foreignObjectList.length - let transform = async () => { - this.mindMap.emit('transforming-dom-to-images', index, len) - try { - let item = foreignObjectList[index++] - let parent = item.parent() - let clone = item.first().node.cloneNode(true) - let div = document.createElement('div') - div.style.cssText = `position: fixed; left: -999999px;` - div.appendChild(clone) - this.mindMap.el.appendChild(div) - let canvas = await html2canvas(clone, { - backgroundColor: null - }) - // 优先使用原始宽高，因为当设备的window.devicePixelRatio不为1时，html2canvas输出的图片会更大 - let imgNodeWidth = parent.attr('data-width') || canvas.width - let imgNodeHeight = parent.attr('data-height') || canvas.height - this.mindMap.el.removeChild(div) - let imgNode = new SvgImage() - .load(canvas.toDataURL()) - .size(imgNodeWidth, imgNodeHeight) - .x((parent ? parent.attr('data-offsetx') : 0) || 0) - item.replace(imgNode) - if (index <= len - 1) { - setTimeout(() => { - transform() - }, 0) - } else { - resolve({ - svg: svg, - svgHTML: svg.svg() - }) - } - } catch (error) { - reject(error) - } - } - if (len > 0) { - transform() - } else { - resolve(null) - } + walk(node) + let canvas = await html2canvas(el, { + backgroundColor: null }) + this.mindMap.el.removeChild(el) + return canvas.toDataURL() } // 将所有节点转换成非富文本节点 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 } }, @@ -498,6 +452,23 @@ class RichText { this.mindMap.render(null, CONSTANTS.TRANSFORM_TO_NORMAL_NODE) } + // 处理导入数据 + handleSetData(data) { + let walk = (root) => { + 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) + }) + } + } + walk(data) + return data + } + // 插件被移除前做的事情 beforePluginRemove() { this.transformAllNodesToNormalNode() diff --git a/simple-mind-map/src/Style.js b/simple-mind-map/src/Style.js index 72f109c9..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 { @@ -120,11 +132,11 @@ class Style { } // html文字节点 - domText(node, fontSizeScale = 1, textLines) { + domText(node, fontSizeScale = 1, isMultiLine) { node.style.fontFamily = this.merge('fontFamily') node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px' node.style.fontWeight = this.merge('fontWeight') || 'normal' - node.style.lineHeight = textLines === 1 ? 'normal' : this.merge('lineHeight') + node.style.lineHeight = !isMultiLine ? 'normal' : this.merge('lineHeight') node.style.fontStyle = this.merge('fontStyle') } diff --git a/simple-mind-map/src/TextEdit.js b/simple-mind-map/src/TextEdit.js index adb2c9de..80d7e90b 100644 --- a/simple-mind-map/src/TextEdit.js +++ b/simple-mind-map/src/TextEdit.js @@ -110,7 +110,8 @@ export default class TextEdit { let lineHeight = node.style.merge('lineHeight') let fontSize = node.style.merge('fontSize') let textLines = (this.cacheEditingText || node.nodeData.data.text).split(/\n/gim) - node.style.domText(this.textEditNode, scale, textLines.length) + let isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true' + node.style.domText(this.textEditNode, scale, isMultiLine) this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex this.textEditNode.innerHTML = textLines.join('
') this.textEditNode.style.minWidth = rect.width + 10 + 'px' @@ -119,8 +120,8 @@ export default class TextEdit { this.textEditNode.style.top = rect.top + 'px' this.textEditNode.style.display = 'block' this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth * scale + 'px' - if (textLines.length > 1 && lineHeight !== 1) { - this.textEditNode.style.transform = `translateY(${-((lineHeight * fontSize - fontSize) / 2 - 2) * scale}px)` + if (isMultiLine && lineHeight !== 1) { + this.textEditNode.style.transform = `translateY(${-((lineHeight * fontSize - fontSize) / 2) * scale}px)` } this.showTextEdit = true // 选中文本 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 9c507af1..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 = `
${this.nodeData.data.text}
` let div = document.createElement('div') div.innerHTML = html @@ -96,6 +103,7 @@ function createTextNode() { let textStyle = this.style.getTextFontStyle() let textArr = this.nodeData.data.text.split(/\n/gim) let maxWidth = this.mindMap.opt.textAutoWrapWidth + let isMultiLine = false textArr.forEach((item, index) => { let arr = item.split('') let lines = [] @@ -113,6 +121,9 @@ function createTextNode() { if (line.length > 0) { lines.push(line.join('')) } + if (lines.length > 1) { + isMultiLine = true + } textArr[index] = lines.join('\n') }) textArr = textArr.join('\n').split(/\n/gim) @@ -127,6 +138,7 @@ function createTextNode() { height = Math.ceil(height) g.attr('data-width', width) g.attr('data-height', height) + g.attr('data-ismultiLine', isMultiLine || textArr.length > 1) return { node: g, width, diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index 0d1d1c6d..f66a24ea 100644 --- a/web/src/lang/en_us.js +++ b/web/src/lang/en_us.js @@ -90,7 +90,7 @@ export default { pdfFile: 'pdf file', markdownFile: 'markdown file', tips: 'tips: .smm and .json file can be import', - domToImage: 'Whether to convert rich text nodes in svg into pictures', + isTransparent: 'Background is transparent', pngTips: 'tips: Exporting pictures in rich text mode is time-consuming. It is recommended to export to svg format', svgTips: 'tips: Exporting pictures in rich text mode is time-consuming', transformingDomToImages: 'Converting nodes: ', diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index 74477611..407866ef 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -90,7 +90,7 @@ export default { pdfFile: 'pdf文件', markdownFile: 'markdown文件', tips: 'tips：.smm和.json文件可用于导入', - domToImage: '是否将svg中富文本节点转换成图片', + isTransparent: '背景是否透明', pngTips: 'tips：富文本模式导出图片非常耗时，建议导出为svg格式', svgTips: 'tips：富文本模式导出图片非常耗时', transformingDomToImages: '正在转换节点：', diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 15b6fa44..2661b738 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -1,5 +1,13 @@ # Changelog +## 0.5.7 + +Breaking change：In rich text mode, exporting png has been changed to using html2canvas to convert the entire svg, greatly improving the export speed. However, html2canvas has a bug where the text color inline with the dom node in the foreignObject element cannot be recognized. Therefore, the text color of the exported node is fixed. However, compared to the previously unavailable state of the export, it can at least be exported quickly and smoothly. + +optimization: Optimize the rich text node editing experience. + +New: In rich text mode, importing data, initializing data, and switching theme scene node styles support following theme changes. + ## 0.5.6 Fix: 1.Fix the issue of node position disorder during fast and multiple renderings in a short period of time. 2.Fix the issue of dragging the canvas while the node is being edited, causing the edit box and node to separate. diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index 8fc39958..268c57cf 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -1,6 +1,10 @@ diff --git a/web/src/pages/Doc/en/richText/index.md b/web/src/pages/Doc/en/richText/index.md index e087f031..e4f09294 100644 --- a/web/src/pages/Doc/en/richText/index.md +++ b/web/src/pages/Doc/en/richText/index.md @@ -10,9 +10,11 @@ By default, node editing can only uniformly apply styles to all text in the node The principle of this plugin is to use [Quill](https://github.com/quilljs/quill) editor implements rich text editing, and then uses the edited `DOM` node directly as the text data of the node, and embeds the `DOM` node through the `svg` `foreignObject` tag during rendering. -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 following prompts exist in versions prior to v0.5.6: +> +> 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. -If you have a better way, please leave a message. +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. ## Register diff --git a/web/src/pages/Doc/en/richText/index.vue b/web/src/pages/Doc/en/richText/index.vue index 8b9258f8..43db5c80 100644 --- a/web/src/pages/Doc/en/richText/index.vue +++ b/web/src/pages/Doc/en/richText/index.vue @@ -10,8 +10,11 @@

This plugin provides the ability to edit rich text of nodes, and takes effect after registration.

By default, node editing can only uniformly apply styles to all text in the node. This plugin can support rich text editing effects. Currently, it supports bold, italic, underline, strikethrough, font, font size, color, and backgroundColor. Underline and line height are not supported.

The principle of this plugin is to use Quill editor implements rich text editing, and then uses the edited DOM node directly as the text data of the node, and embeds the DOM node through the svg foreignObject tag during rendering.

+
+

The following prompts exist in versions prior to v0.5.6:

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 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.

-

If you have a better way, please leave a message.

+
+

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.

Register

import MindMap from 'simple-mind-map'
 import RichText from 'simple-mind-map/src/RichText.js'
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index f3273f66..238d1c1a 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.5.7
+
+破坏性更新：富文本模式下导出png改为使用html2canvas转换整个svg，大幅提高导出速度，不过html2canvas存在一个bug，foreignObject元素中的dom节点内联的文字颜色无法识别，所以导出节点的文字颜色是固定的，不过相对于之前的导出基本不可用状态，目前至少能快速顺利的导出。
+
+优化：优化富文本节点编辑体验。
+
+新增：富文本模式下，导入数据、初始化数据、切换主题场景节点样式支持跟随主题变化。
+
 ## 0.5.6
 
 修复：1.修复短时间快速多次渲染时节点位置错乱的问题。 2.修复节点正在编辑中时拖动画布导致编辑框和节点分离的问题。
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index 65d5ad30..5c7b0a31 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,10 @@
 
diff --git a/web/src/pages/Doc/zh/richText/index.md b/web/src/pages/Doc/zh/richText/index.md
index 7ea1a3a7..fe1496c0 100644
--- a/web/src/pages/Doc/zh/richText/index.md
+++ b/web/src/pages/Doc/zh/richText/index.md
@@ -10,9 +10,11 @@
 
 该插件的原理是使用[Quill](https://github.com/quilljs/quill)编辑器实现富文本编辑，然后把编辑后生成的`DOM`节点直接作为节点的文本数据，并且在渲染的时候通过`svg`的`foreignObject`标签嵌入`DOM`节点。
 
-这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将`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.6即以前的版本存在以下提示：
+>
+> 这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将`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`，就是节点的颜色导出后不生效。
 
 ## 注册
 
diff --git a/web/src/pages/Doc/zh/richText/index.vue b/web/src/pages/Doc/zh/richText/index.vue
index fb3d504b..4fe77a03 100644
--- a/web/src/pages/Doc/zh/richText/index.vue
+++ b/web/src/pages/Doc/zh/richText/index.vue
@@ -10,8 +10,11 @@
 
该插件提供节点富文本编辑的能力，注册了即可生效。

 
默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色、背景颜色。不支持上划线、行高。

 
该插件的原理是使用Quill编辑器实现富文本编辑，然后把编辑后生成的DOM节点直接作为节点的文本数据，并且在渲染的时候通过svg的foreignObject标签嵌入DOM节点。

+

+
v0.5.6即以前的版本存在以下提示：

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

-
如果你有更好的方式也欢迎留言。

+

+
v0.5.7+的版本直接使用html2canvas转换整个svg，速度不再是问题，但是目前存在一个bug，就是节点的颜色导出后不生效。

 
注册

 
import MindMap from 'simple-mind-map'
 import RichText from 'simple-mind-map/src/RichText.js'
diff --git a/web/src/pages/Edit/components/Export.vue b/web/src/pages/Edit/components/Export.vue
index 15227835..3a9b879d 100644
--- a/web/src/pages/Edit/components/Export.vue
+++ b/web/src/pages/Edit/components/Export.vue
@@ -23,12 +23,6 @@
           style="margin-left: 12px"
           >{{ $t('export.include') }}
-        {{ $t('export.domToImage') }}
       
       

         {{ $t('export.paddingX') }}
@@ -45,6 +39,12 @@
           size="mini"
           @change="onPaddingChange"
         >
+        {{ $t('export.isTransparent') }}
       

       

         

       

       
{{ $t('export.tips') }}

-      
{{ $t('export.pngTips') }}

       
{{ $t('export.svgTips') }}

     

     
@@ -91,7 +90,7 @@ export default {
       exportType: 'smm',
       fileName: '思维导图',
       widthConfig: true,
-      domToImage: false,
+      isTransparent: false,
       loading: false,
       loadingText: '',
       paddingX: 10,
@@ -111,13 +110,6 @@ export default {
     this.$bus.$on('showExport', () => {
       this.dialogVisible = true
     })
-    this.$bus.$on('transforming-dom-to-images', (index, len) => {
-      this.loading = true
-      this.loadingText = `${this.$t('export.transformingDomToImages')}${index + 1}/${len}`
-      if (index >= len - 1) {
-        this.loading = false
-      }
-    })
   },
   methods: {
     onPaddingChange() {
@@ -148,14 +140,13 @@ export default {
           this.exportType,
           true,
           this.fileName,
-          this.domToImage,
           `* {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
           }`
         )
-      } else {
+      } else if (['smm', 'json'].includes(this.exportType)) {
         this.$bus.$emit(
           'export',
           this.exportType,
@@ -163,6 +154,21 @@ export default {
           this.fileName,
           this.widthConfig
         )
+      } else if (this.exportType === 'png') {
+        this.$bus.$emit(
+          'export',
+          this.exportType,
+          true,
+          this.fileName,
+          this.isTransparent
+        )
+      } else {
+        this.$bus.$emit(
+          'export',
+          this.exportType,
+          true,
+          this.fileName
+        )
       }
       this.$notify.info({
         title: this.$t('export.notifyTitle'),
diff --git a/web/src/pages/Edit/components/Theme.vue b/web/src/pages/Edit/components/Theme.vue
index bfb3a37b..a6e60c41 100644
--- a/web/src/pages/Edit/components/Theme.vue
+++ b/web/src/pages/Edit/components/Theme.vue
@@ -1,5 +1,5 @@