[vue.js]不使用框架实现简单的富文本功能,选中文字修改颜色
效果图:关于富文本的功能,目前只实现了简单的修改颜色,后续会持续更新,包括粗体、字号、下划线等。{{currentblockitem.title}}
先用v-html把标签的内容转成html显示。其次——webkit-user-select:text这个属性指定了文本可以被选中最后我们监听文本部分的鼠标抬起动作handleselecttext(){this.replacetext=window.getSelection().toString();//获取鼠标选中的文本内容},setparttextcolor(){lettitle=this.title;letreplaceReg=newRegExp(this.replacetext,"g");//定义匹配规则letreplaceString='
'+this.replacetext+"跨度>”;title=title.replace(replaceReg,replaceString);控制台日志(标题);},我们使用正则表达式来匹配需要替换的内容,将文本内容替换为拼接的html字符串,并将文本样式设置为内联。如果样式比较多,可以使用加类的方法。RegExp对象RegExp对象用于指定要在文本中搜索的内容。(1)第一个参数为“正则表达式”(2)第二个参数“modifier”为可选字符串,其值为“g”、“i”和“m”,分别用于指定全局匹配,区分大小写匹配和多行匹配。