4
效果图:

image.png

关于富文本的功能,目前只简单实现了修改颜色,后续会持续更新,包括加粗、字体大小、下划线等等功能。

<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",分别用于指定全局匹配、区分大小写匹配和多行匹配。


无锡肖奈
186 声望7 粉丝

十八线野生程序猿 前端开发