应公司的需求使用了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中使用的。

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

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