解决vue富文本框中含有 p 标签

3,184 阅读2分钟

应公司的需求使用了ruoyi框架构建了一个后台管理系统,在使用ruoyi自带的富文本编辑器的时候,发现传给后台的数据是带有HTML标签的内容,类似于这种:<p>哈哈哈哈哈哈哈哈哈哈哈</p>,一开始后台并没有做处理,直接将其内容发送给了前端,然后就导致前端在做渲染的时候,页面上出现了<p>哈哈哈哈哈哈哈哈哈哈哈</p>这种情况。

在看了vue-quill-editor的官方文档后,发现解决的方法比较复杂(好吧,我承认是自己没看懂),于是就另辟蹊径在百度上寻求帮助,发现了至少两种由前端来解决的方案,于是便顺利解决并且记录下来:

方案一:利用vue中提供的v-html指令,将要渲染的内容添加到标签上就OK了,

例子:

 <p class="content" v-html="$route.query.content">{{$route.query.content}}</p>

方案二:利用正则表达式将HTML标签给过滤掉

例子:

//template部分
<div class="f_right">   <span>{{firstNew.newTitle}}</span>   <div class="newContent">{{firstNew.newContent}}</div></div>// 处理富文本标签handleTag() {  let str = this.firstNew.newContent  return this.firstNew.newContent = str.replace(/<[^>]+>/g, '')}

个人推荐第二种方案,原因是使用第一种方案会有一些意料之外的样式破坏掉布局,当然如果有大佬可以解决这种问题,也是可以使用第一种方案的。

还有一点需要注意的是,因为是富文本编辑后在传到页面上的,所以vue的生命周期需要好好考虑一下,我个人是在updated中使用的。

还有一点啊,个人比较推荐的就是由后台使用正则过滤掉标签,然后再传给前端,如果不行话,那就尽量的使用第二种解决方案。

如果有幸能让一些大佬看到的话,欢迎留言赐教,谢谢😊