mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-22 10:57:40 +08:00
Feature：富文本支持设置背景颜色
This commit is contained in:
wanglin2
parent
0ea618af39
commit
231adeea44
@ -6,4 +6,5 @@
|
||||
|
||||
.ql-container {
|
||||
height: auto;
|
||||
font-size: inherit;
|
||||
}
|
||||
@ -54,6 +54,18 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">背景颜色</div>
|
||||
<div class="code-name">&#xe6f8;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">清除</div>
|
||||
<div class="code-name">&#xe605;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">case</div>
|
||||
@ -390,9 +402,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1677058133223') format('woff2'),
|
||||
url('iconfont.woff?t=1677058133223') format('woff'),
|
||||
url('iconfont.ttf?t=1677058133223') format('truetype');
|
||||
src: url('iconfont.woff2?t=1677478278322') format('woff2'),
|
||||
url('iconfont.woff?t=1677478278322') format('woff'),
|
||||
url('iconfont.ttf?t=1677478278322') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@ -418,6 +430,24 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont iconbeijingyanse"></span>
|
||||
<div class="name">
|
||||
背景颜色
|
||||
</div>
|
||||
<div class="code-name">.iconbeijingyanse
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont iconqingchu"></span>
|
||||
<div class="name">
|
||||
清除
|
||||
</div>
|
||||
<div class="code-name">.iconqingchu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont iconcase"></span>
|
||||
<div class="name">
|
||||
@ -922,6 +952,22 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#iconbeijingyanse"></use>
|
||||
</svg>
|
||||
<div class="name">背景颜色</div>
|
||||
<div class="code-name">#iconbeijingyanse</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#iconqingchu"></use>
|
||||
</svg>
|
||||
<div class="name">清除</div>
|
||||
<div class="code-name">#iconqingchu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#iconcase"></use>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2479351 */
|
||||
src: url('iconfont.woff2?t=1677058133223') format('woff2'),
|
||||
url('iconfont.woff?t=1677058133223') format('woff'),
|
||||
url('iconfont.ttf?t=1677058133223') format('truetype');
|
||||
src: url('iconfont.woff2?t=1677478278322') format('woff2'),
|
||||
url('iconfont.woff?t=1677478278322') format('woff'),
|
||||
url('iconfont.ttf?t=1677478278322') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,14 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.iconbeijingyanse:before {
|
||||
content: "\e6f8";
|
||||
}
|
||||
|
||||
.iconqingchu:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.iconcase:before {
|
||||
content: "\e6c6";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,20 @@
|
||||
"css_prefix_text": "icon",
|
||||
"description": "思维导图",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "1790495",
|
||||
"name": "背景颜色",
|
||||
"font_class": "beijingyanse",
|
||||
"unicode": "e6f8",
|
||||
"unicode_decimal": 59128
|
||||
},
|
||||
{
|
||||
"icon_id": "11321310",
|
||||
"name": "清除",
|
||||
"font_class": "qingchu",
|
||||
"unicode": "e605",
|
||||
"unicode_decimal": 58885
|
||||
},
|
||||
{
|
||||
"icon_id": "586787",
|
||||
"name": "case",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -6,7 +6,7 @@
|
||||
|
||||
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](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.
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<p>Note: This is a testing nature and imperfect function</p>
|
||||
</blockquote>
|
||||
<p>This plugin provides the ability to edit rich text of nodes, and takes effect after registration.</p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<p>The principle of this plugin is to use <a href="https://github.com/quilljs/quill">Quill</a> editor implements rich text editing, and then uses the edited <code>DOM</code> node directly as the text data of the node, and embeds the <code>DOM</code> node through the <code>svg</code> <code>foreignObject</code> tag during rendering.</p>
|
||||
<p>This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting <code>svg</code> as an image is very simple, Get the <code>svg</code> string, and then create the <code>blob</code> data of the <code>type=image/svg+xml</code> type. Then use the <code>URL.createObjectURL</code> method to generate the <code>data:url</code> data. Then create a <code>Image</code> tag, use the <code>data:url</code> as the <code>src</code> of the image, and finally draw the image on the <code>canvas</code> object for export, However, after testing, when the <code>DOM</code> node is embedded in the <code>svg</code>, 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 <code>foreignObject</code> node in <code>svg</code>, using <a href="https://github.com/niklasvh/html2canvas">html2canvas</a> Convert the <code>DOM</code> node in the <code>foreignObject</code> node into an image and then replace the <code>foreignObject</code> node. This method can work, but it is very time-consuming. Because the <code>html2canvas</code> 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.</p>
|
||||
<p>If you have a better way, please leave a message.</p>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
该插件提供节点富文本编辑的能力，注册了即可生效。
|
||||
|
||||
默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色。不支持上划线、行高。
|
||||
默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色、背景颜色。不支持上划线、行高。
|
||||
|
||||
该插件的原理是使用[Quill](https://github.com/quilljs/quill)编辑器实现富文本编辑，然后把编辑后生成的`DOM`节点直接作为节点的文本数据，并且在渲染的时候通过`svg`的`foreignObject`标签嵌入`DOM`节点。
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<p>注意：这是一个测试性质和不完善的功能</p>
|
||||
</blockquote>
|
||||
<p>该插件提供节点富文本编辑的能力，注册了即可生效。</p>
|
||||
<p>默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色。不支持上划线、行高。</p>
|
||||
<p>默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色、背景颜色。不支持上划线、行高。</p>
|
||||
<p>该插件的原理是使用<a href="https://github.com/quilljs/quill">Quill</a>编辑器实现富文本编辑，然后把编辑后生成的<code>DOM</code>节点直接作为节点的文本数据，并且在渲染的时候通过<code>svg</code>的<code>foreignObject</code>标签嵌入<code>DOM</code>节点。</p>
|
||||
<p>这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将<code>svg</code>导出为图片的原理很简单，获取到<code>svg</code>字符串，然后创建为<code>type=image/svg+xml</code>类型的<code>blob</code>数据，再使用<code>URL.createObjectURL</code>方法生成<code>data:url</code>数据，再创建一个<code>Image</code>标签，将<code>data:url</code>作为该图片的<code>src</code>，最后再将这个图片绘制到<code>canvas</code>对象上进行导出，但是经过测试，当<code>svg</code>中嵌入了<code>DOM</code>节点，这种方式导出会出错，并且尝试了多种方式后都无法实现完美的导出效果，目前的方式是遍历<code>svg</code>中的<code>foreignObject</code>节点，使用<a href="https://github.com/niklasvh/html2canvas">html2canvas</a>将<code>foreignObject</code>节点内的<code>DOM</code>节点转换为图片再替换掉<code>foreignObject</code>节点，这种方式可以工作，但是非常耗时，因为<code>html2canvas</code>转换一次的时间很长，导致转换一个节点都需要耗时差不多2秒，这样导致节点越多，转换时间越慢，所以如果无法忍受长时间的导出的话推荐不要使用该插件。</p>
|
||||
<p>如果你有更好的方式也欢迎留言。</p>
|
||||
|
||||
@ -90,6 +90,15 @@
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="背景颜色" placement="top">
|
||||
<el-popover placement="bottom" trigger="hover">
|
||||
<Color :color="fontBackgroundColor" @change="changeFontBackgroundColor"></Color>
|
||||
<div class="btn" slot="reference">
|
||||
<span class="icon iconfont iconbeijingyanse"></span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user