Note: This is a testing nature and imperfect function
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, and color. Underline and line height are not supported.
+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.
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.
diff --git a/web/src/pages/Doc/zh/richText/index.md b/web/src/pages/Doc/zh/richText/index.md
index e9c10791..33957ffe 100644
--- a/web/src/pages/Doc/zh/richText/index.md
+++ b/web/src/pages/Doc/zh/richText/index.md
@@ -6,7 +6,7 @@
该插件提供节点富文本编辑的能力,注册了即可生效。
-默认节点编辑只能对节点内所有文本统一应用样式,通过该插件可以支持富文本编辑的效果,目前支持:加粗、斜体、下划线、删除线、字体、字号、颜色。不支持上划线、行高。
+默认节点编辑只能对节点内所有文本统一应用样式,通过该插件可以支持富文本编辑的效果,目前支持:加粗、斜体、下划线、删除线、字体、字号、颜色、背景颜色。不支持上划线、行高。
该插件的原理是使用[Quill](https://github.com/quilljs/quill)编辑器实现富文本编辑,然后把编辑后生成的`DOM`节点直接作为节点的文本数据,并且在渲染的时候通过`svg`的`foreignObject`标签嵌入`DOM`节点。
diff --git a/web/src/pages/Doc/zh/richText/index.vue b/web/src/pages/Doc/zh/richText/index.vue
index 64130444..57eece28 100644
--- a/web/src/pages/Doc/zh/richText/index.vue
+++ b/web/src/pages/Doc/zh/richText/index.vue
@@ -8,7 +8,7 @@
注意:这是一个测试性质和不完善的功能
该插件提供节点富文本编辑的能力,注册了即可生效。
-默认节点编辑只能对节点内所有文本统一应用样式,通过该插件可以支持富文本编辑的效果,目前支持:加粗、斜体、下划线、删除线、字体、字号、颜色。不支持上划线、行高。
+默认节点编辑只能对节点内所有文本统一应用样式,通过该插件可以支持富文本编辑的效果,目前支持:加粗、斜体、下划线、删除线、字体、字号、颜色、背景颜色。不支持上划线、行高。
该插件的原理是使用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将foreignObject节点内的DOM节点转换为图片再替换掉foreignObject节点,这种方式可以工作,但是非常耗时,因为html2canvas转换一次的时间很长,导致转换一个节点都需要耗时差不多2秒,这样导致节点越多,转换时间越慢,所以如果无法忍受长时间的导出的话推荐不要使用该插件。
如果你有更好的方式也欢迎留言。
diff --git a/web/src/pages/Edit/components/RichTextToolbar.vue b/web/src/pages/Edit/components/RichTextToolbar.vue
index 8d434e3e..0c2f426f 100644
--- a/web/src/pages/Edit/components/RichTextToolbar.vue
+++ b/web/src/pages/Edit/components/RichTextToolbar.vue
@@ -90,6 +90,15 @@
+
+
+
+
+
+
+
+
+
@@ -116,6 +125,7 @@ export default {
top: 0
},
fontColor: '',
+ fontBackgroundColor: '',
formatInfo: {}
}
},
@@ -190,6 +200,13 @@ export default {
this.mindMap.richText.formatText({
color
})
+ },
+
+ changeFontBackgroundColor(background) {
+ this.formatInfo.background = background
+ this.mindMap.richText.formatText({
+ background
+ })
}
}
}