效果图:
关于富文本的功能,目前只简单实现了修改颜色,后续会持续更新,包括加粗、字体大小、下划线等等功能。
<el-color-picker v-model="textcolor" @change="setparttextcolor"></el-color-picker>
<div style="-webkit-user-select: text"
@mouseup="handleselecttext"
v-html="title"
>{{currentblockitem.title}}</div>
首先使用v-html把标签的内容,转化为html的形式展示。
其次-webkit-user-select: text
该属性规定了文本可选中
最后,我们监听文本部分的鼠标抬起动作
handleselecttext() {
this.replacetext = window.getSelection().toString();//获取鼠标选中文本的内容
},
setparttextcolor() {
let title = this.title;
let replaceReg = new RegExp(this.replacetext, "g");//定义匹配规则
let replaceString =
'<span style="color: ' + this.textcolor + ';">' + this.replacetext + "</span>";
title = title.replace(replaceReg, replaceString);
console.log(title);
},
我们使用正则表达式,匹配需要替换的文本内容,替换成拼接起来的html字符串,使用内联的方式给文本添加样式。
如果样式多的话,可以使用添加类的方式。
RegExp 对象
RegExp 对象用于规定在文本中检索的内容。
(1)第一个参数是“正则表达式”
(2)第二个参数“修饰符”是一个可选的字符串,其值有 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写匹配和多行匹配。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。