From 4318646abe10cd8d9615c83005a52ce826d35cd5 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Sun, 23 Apr 2023 14:36:47 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/Doc/en/constructor/index.md | 12 +++++++++++ web/src/pages/Doc/en/constructor/index.vue | 6 ++++++ web/src/pages/Doc/en/doExport/index.md | 22 ++++++++++++------- web/src/pages/Doc/en/doExport/index.vue | 25 ++++++++++++++-------- web/src/pages/Doc/en/richText/index.md | 6 ++++-- web/src/pages/Doc/en/richText/index.vue | 5 ++++- web/src/pages/Doc/zh/constructor/index.md | 12 +++++++++++ web/src/pages/Doc/zh/constructor/index.vue | 6 ++++++ web/src/pages/Doc/zh/course17/index.md | 8 ++----- web/src/pages/Doc/zh/course17/index.vue | 6 ++---- web/src/pages/Doc/zh/doExport/index.md | 20 +++++++++++------ web/src/pages/Doc/zh/doExport/index.vue | 25 ++++++++++++++-------- web/src/pages/Doc/zh/richText/index.md | 6 ++++-- web/src/pages/Doc/zh/richText/index.vue | 5 ++++- 14 files changed, 115 insertions(+), 49 deletions(-) diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index 3a3ea03e..d28693f1 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -355,6 +355,18 @@ smm (essentially also json) `fileName`: (v0.1.6+) the name of the exported file, default is `思维导图` (mind map). +If it is exported as `png`, the fourth parameter can be passed: + +`transparent`: v0.5.7+, `Boolean`, default is `false`, Specify whether the background of the exported image is transparent + +If it is exported as `svg`, the fourth parameter can be passed: + +`plusCssText`: Additional `CSS` style. If there is a `dom` node in `svg`, you can pass in some styles specific to the node through this parameter + +If it is exported as `json` or `smm`, the fourth parameter can be passed: + +`withConfig`: `Boolean`, default is `true`, Specify whether the exported data includes configuration data, otherwise only pure node tree data will be exported + ### toPos(x, y) > v0.1.5+ diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index c5bfb63f..57b8d446 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -814,6 +814,12 @@ smm (essentially also json)

false

fileName: (v0.1.6+) the name of the exported file, default is 思维导图 (mind map).

+

If it is exported as png, the fourth parameter can be passed:

+

transparent: v0.5.7+, Boolean, default is false, Specify whether the background of the exported image is transparent

+

If it is exported as svg, the fourth parameter can be passed:

+

plusCssText: Additional CSS style. If there is a dom node in svg, you can pass in some styles specific to the node through this parameter

+

If it is exported as json or smm, the fourth parameter can be passed:

+

withConfig: Boolean, default is true, Specify whether the exported data includes configuration data, otherwise only pure node tree data will be exported

toPos(x, y)

v0.1.5+

diff --git a/web/src/pages/Doc/en/doExport/index.md b/web/src/pages/Doc/en/doExport/index.md index c7bd5fec..03617a03 100644 --- a/web/src/pages/Doc/en/doExport/index.md +++ b/web/src/pages/Doc/en/doExport/index.md @@ -15,17 +15,19 @@ After registration and instantiation of `MindMap`, the instance can be obtained ## Methods -### png() +### png(name, transparent = false) + +- `name`: Name, optional + +- `transparent`: v0.5.7+, Specify whether the background of the exported image is transparent Exports as `png`, an async method that returns image data, `data:url` data which can be downloaded or displayed. -### svg(name, domToImage = false, plusCssText) +### svg(name, plusCssText) - `name`：`svg` title -- `domToImage`：v0.4.0+, When node rich text editing is enabled, you can use this parameter to specify whether to convert the `dom` node in the `svg` into a picture - - `plusCssText`：v0.4.0+, When node rich text editing is enabled and `domToImage` passes `false`, additional `css` styles can be added. If there is a `dom` node in `svg`, you can set some styles for the node through this parameter, such as: ```js @@ -43,9 +45,7 @@ svg( Exports as `svg`, an async method that returns `svg` data, `data:url` data which can be downloaded or displayed. -### getSvgData(domToImage) - -- `domToImage`：v0.4.0+, If node rich text is enabled, you can use this parameter to specify whether to convert the `DOM` node embedded in `svg` into a picture. +### getSvgData() Gets `svg` data, an async method that returns an object: @@ -71,4 +71,10 @@ Export as `pdf` `withConfig``：Boolean`, default `true`, Whether the data contains configuration, otherwise it is pure mind map node data -Return `json` data, `data:url` type, you can download it yourself \ No newline at end of file +Return `json` data, `data:url` type, you can download it yourself + +### md() + +> v0.4.7+ + +Export as `markdown` file, Return `json` data, `data:url` type, you can download it yourself \ No newline at end of file diff --git a/web/src/pages/Doc/en/doExport/index.vue b/web/src/pages/Doc/en/doExport/index.vue index 708023ea..3801e299 100644 --- a/web/src/pages/Doc/en/doExport/index.vue +++ b/web/src/pages/Doc/en/doExport/index.vue @@ -10,18 +10,23 @@ MindMap.usePlugin(Export)

After registration and instantiation of MindMap, the instance can be obtained through mindMap.doExport.

Methods

-

png()

+

png(name, transparent = false)

+

Exports as png, an async method that returns image data, data:url data which can be downloaded or displayed.

-

svg(name, domToImage = false, plusCssText)

+

svg(name, plusCssText)

@@ -37,10 +42,7 @@ can be downloaded or displayed.

Exports as svg, an async method that returns svg data, data:url data which can be downloaded or displayed.

-

getSvgData(domToImage)

- +

getSvgData()

Gets svg data, an async method that returns an object:

{
   node; // svg object
@@ -58,6 +60,11 @@ can be downloaded or displayed.

 
name：It is temporarily useless, just pass an empty string

 
withConfig``：Boolean, default true, Whether the data contains configuration, otherwise it is pure mind map node data

 
Return json data, data:url type, you can download it yourself

+
md()

+

+
v0.4.7+

+

+
Export as markdown file, Return json data, data:url type, you can download it yourself

 
   
 
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/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index bf37a3d0..21c50db9 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -344,6 +344,18 @@ mindMap.updateConfig({
 
 `fileName`：（v0.1.6+）导出文件的名称，默认为`思维导图`
 
+如果是导出为`png`，那么可以传递第四个参数：
+
+`transparent`：v0.5.7+, `Boolean`，默认为`false`，指定导出图片的背景是否是透明的
+
+如果是导出为`svg`，那么可以传递第四个参数：
+
+`plusCssText`：附加的`css`样式，如果`svg`中存在`dom`节点，想要设置一些针对节点的样式可以通过这个参数传入
+
+如果是导出为`json`或`smm`，那么可以传递第四个参数：
+
+`withConfig`：`Boolean`，默认为`true`，指定导出的数据中是否包含配置数据，否则只导出纯节点树数据
+
 ### toPos(x, y)
 
 > v0.1.5+
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 12a1ea40..455b5826 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -803,6 +803,12 @@ mindMap.setTheme('主题名称')
 
type：要导出的类型，可选值：png、svg、json、pdf（v0.2.1+）、smm（本质也是json）

 
isDownload：是否需要直接触发下载，布尔值，默认为false

 
fileName：（v0.1.6+）导出文件的名称，默认为思维导图

+
如果是导出为png，那么可以传递第四个参数：

+
transparent：v0.5.7+, Boolean，默认为false，指定导出图片的背景是否是透明的

+
如果是导出为svg，那么可以传递第四个参数：

+
plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入

+
如果是导出为json或smm，那么可以传递第四个参数：

+
withConfig：Boolean，默认为true，指定导出的数据中是否包含配置数据，否则只导出纯节点树数据

 
toPos(x, y)

 

 
v0.1.5+

diff --git a/web/src/pages/Doc/zh/course17/index.md b/web/src/pages/Doc/zh/course17/index.md
index 4fc5334b..9fd1156b 100644
--- a/web/src/pages/Doc/zh/course17/index.md
+++ b/web/src/pages/Doc/zh/course17/index.md
@@ -50,19 +50,15 @@ mindMap.export('png', true, '文件名')
 mindMap.export('pdf', true, '文件名')
 ```
 
-如果开启了节点富文本编辑，那么导出会非常慢，因为需要挨个转换节点，所以如果导出操作很频繁的话建议关闭节点非文本编辑功能。
-
 ### 导出为svg
 
 导出为`svg`可以传递的参数如下：
 
 ```js
-mindMap.export(type, isDownload, fileName, domToImage = false, plusCssText = '')
+mindMap.export(type, isDownload, fileName, plusCssText = '')
 ```
 
-如果开启了节点富文本编辑功能，那么可以通过`domToImage`参数控制导出的`svg`中是否保留`html`结构，还是转换成图片形式，同样，如果传了`true`，导出会非常耗时，建议导出为`svg`时`domToImage`传`false`。
-
-如果`domToImage`传的是`false`，也就是`svg`中会保留节点的`html`结构，这就又存在一个问题，因为浏览器对每个元素默认会设置一些样式，影响最大的就是`margin`和`padding`，这就有可能会导致节点中的文字错位，所以可以通过`plusCssText`参数传入`css`样式：
+如果开启了节点富文本编辑，也就是`svg`中会存在节点的`html`结构，这就又存在一个问题，因为浏览器对每个元素默认会设置一些样式，影响最大的就是`margin`和`padding`，这就有可能会导致节点中的文字错位，所以可以通过`plusCssText`参数传入`css`样式：
 
 ```js
 mindMap.export(
diff --git a/web/src/pages/Doc/zh/course17/index.vue b/web/src/pages/Doc/zh/course17/index.vue
index 90318897..c332dd02 100644
--- a/web/src/pages/Doc/zh/course17/index.vue
+++ b/web/src/pages/Doc/zh/course17/index.vue
@@ -33,13 +33,11 @@ mindMap.export('json', mindMap.export('png', true, '文件名')
 mindMap.export('pdf', true, '文件名')
 

-
如果开启了节点富文本编辑，那么导出会非常慢，因为需要挨个转换节点，所以如果导出操作很频繁的话建议关闭节点非文本编辑功能。

 
导出为svg

 
导出为svg可以传递的参数如下：

-
mindMap.export(type, isDownload, fileName, domToImage = false, plusCssText = '')
+
mindMap.export(type, isDownload, fileName, plusCssText = '')
 

-
如果开启了节点富文本编辑功能，那么可以通过domToImage参数控制导出的svg中是否保留html结构，还是转换成图片形式，同样，如果传了true，导出会非常耗时，建议导出为svg时domToImage传false。

-
如果domToImage传的是false，也就是svg中会保留节点的html结构，这就又存在一个问题，因为浏览器对每个元素默认会设置一些样式，影响最大的就是margin和padding，这就有可能会导致节点中的文字错位，所以可以通过plusCssText参数传入css样式：

+
如果开启了节点富文本编辑，也就是svg中会存在节点的html结构，这就又存在一个问题，因为浏览器对每个元素默认会设置一些样式，影响最大的就是margin和padding，这就有可能会导致节点中的文字错位，所以可以通过plusCssText参数传入css样式：

 
mindMap.export(
     'svg', 
     true, 
diff --git a/web/src/pages/Doc/zh/doExport/index.md b/web/src/pages/Doc/zh/doExport/index.md
index 5d176de6..56d9c37a 100644
--- a/web/src/pages/Doc/zh/doExport/index.md
+++ b/web/src/pages/Doc/zh/doExport/index.md
@@ -15,16 +15,18 @@ MindMap.usePlugin(Export)
 
 ## 方法
 
-### png()
+### png(name, transparent = false)
+
+- `name`：名称，可不传
+
+- `transparent`：v0.5.7+，指定导出图片的背景是否是透明的
 
 导出为`png`，异步方法，返回图片数据，`data:url`数据，可以自行下载或显示
 
-### svg(name, domToImage = false, plusCssText)
+### svg(name, plusCssText)
 
 - `name`：`svg`标题
 
-- `domToImage`：v0.4.0+，当开启了节点富文本编辑，可以通过该参数指定是否将`svg`中的`dom`节点转换成图片的形式
-
 - `plusCssText`：v0.4.0+，当开启了节点富文本编辑，且`domToImage`传了`false`时，可以添加附加的`css`样式，如果`svg`中存在`dom`节点，想要设置一些针对节点的样式可以通过这个参数传入，比如：
 
 ```js
@@ -41,9 +43,7 @@ svg(
 
 导出为`svg`，异步方法，返回`svg`数据，`data:url`数据，可以自行下载或显示
 
-### getSvgData(domToImage)
-
-- `domToImage`：v0.4.0+，如果开启了节点富文本，则可以通过该参数指定是否要将`svg`中嵌入的`DOM`节点转换为图片。
+### getSvgData()
 
 获取`svg`数据，异步方法，返回一个对象：
 
@@ -70,3 +70,9 @@ svg(
 `withConfig``：Boolean`, 默认为`true`，数据中是否包含配置，否则为纯思维导图节点数据
 
 返回`json`数据，`data:url`数据，可以自行下载
+
+### md()
+
+> v0.4.7+
+
+导出`markdown`文件，返回`data:url`数据，可以自行下载
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/doExport/index.vue b/web/src/pages/Doc/zh/doExport/index.vue
index 1efab1e2..921125ec 100644
--- a/web/src/pages/Doc/zh/doExport/index.vue
+++ b/web/src/pages/Doc/zh/doExport/index.vue
@@ -10,17 +10,22 @@ MindMap.usePlugin(Export)
 

 
注册完且实例化MindMap后可通过mindMap.doExport获取到该实例。

 
方法

-
png()

+
png(name, transparent = false)

+
    
+
  • 
+
    name：名称，可不传
    
+
    • 
+
  • 
+
    transparent：v0.5.7+，指定导出图片的背景是否是透明的
    
+
    • 
+

 
导出为png，异步方法，返回图片数据，data:url数据，可以自行下载或显示

-
svg(name, domToImage = false, plusCssText)

+
svg(name, plusCssText)

 
    
 
  • 
 
    name：svg标题
    
 
    • 
 
  • 
-
    domToImage：v0.4.0+，当开启了节点富文本编辑，可以通过该参数指定是否将svg中的dom节点转换成图片的形式
    
-
    • 
-
  • 
 
    plusCssText：v0.4.0+，当开启了节点富文本编辑，且domToImage传了false时，可以添加附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入，比如：
    
 
    • 
 

@@ -35,10 +40,7 @@ MindMap.usePlugin(Export)
 )
 

 
导出为svg，异步方法，返回svg数据，data:url数据，可以自行下载或显示

-
getSvgData(domToImage)

-
    
-
  • domToImage：v0.4.0+，如果开启了节点富文本，则可以通过该参数指定是否要将svg中嵌入的DOM节点转换为图片。
    • 
-

+
getSvgData()

 
获取svg数据，异步方法，返回一个对象：

 
{
   node// svg对象
@@ -56,6 +58,11 @@ MindMap.usePlugin(Export)
 
name：暂时没有用处，传空字符串即可

 
withConfig``：Boolean, 默认为true，数据中是否包含配置，否则为纯思维导图节点数据

 
返回json数据，data:url数据，可以自行下载

+
md()

+

+
v0.4.7+

+

+
导出markdown文件，返回data:url数据，可以自行下载

 
   
 
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'