[vue.js]不使用框架实现简单的富文本功能，选中文字修改颜色

本文主要是介绍[vue.js]不使用框架实现简单的富文本功能，选中文字修改颜色，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

效果图：

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

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

这篇关于[vue.js]不使用框架实现简单的富文本功能，选中文字修改颜色的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！