uniapp无法正常解析ueditor的富文本数据的解决方法

133 阅读1分钟

最近用uniapp做一个项目,后台接口返回的是类似<p style="white-space:这样的数据,uniapp要怎么还原展示呢?这是ueditor编辑后的数据。在ueditor那边可以正常回显。以下这图是后台返的数据:

后台数据.png <p style="white-space: normal;"><br/></p><p style="white-space: normal;"> 这是pc端ueditor编辑后保存的数据。 前端直接展示的话就出问题了。下面这个代码是不处理数据直接解析的:

image.png 解析出来的结果是带html的标签内容:

image.png

这肯定是不对的,度娘找了好久都没查到对应的资料。这是因为后台返回的数据经过了HTML编码,需要进行解码才能正常展示,下面是解决问题的方法:

在method中添加这个方法
uniHtmlDecode(str) {
  return str.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"').replace(/&#39;/g, "'");
}

使用方法:

image.png

输出结果:

image.png

搞定!