应公司的需求使用了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中使用的。
还有一点啊,个人比较推荐的就是由后台使用正则过滤掉标签,然后再传给前端,如果不行话,那就尽量的使用第二种解决方案。
如果有幸能让一些大佬看到的话,欢迎留言赐教,谢谢😊