一、使用小程序自带的富文本组件 <rich-text></rich-text>
<view>
<rich-text nodes="{{content}}"></rich-text>
</view>
如果出现图片显示不正常,无法直接对富文本content里的img标签进行操作,那给img加个class,在app.wxss或page.wxss中指定样式。
将富文本转化为json数据类型。
//首先通过将数据转化为json字符串
var jsonDa = JSON.stringify(res.data.rows[0].content).replace(/<img/gi, "<img class='richImg'style='width:auto!important;height:auto!important;max-height:100%;width:100%;'");
var newResData = JSON.parse(jsonDa);
//得到的数据含有img标签的都有richImg类
// console.log(newResData);
二、wxParse解决html与wxml的不匹配问题,实现富文本图片和视频显示的各项优化
它目前最好的可以转化HTML到小程序识别的插件
1.在github中下载 下载地址 https://github.com/icindy/wxParse/tree/master/wxParse
2.下载后复制到自己的小程序项目中
image.png
3.设置全局样式
/app.wxss/
@import "./wxParse/wxParse.wxss";
4.在需要调用插件的页面中引入js
image.png
var WxParse = require('../../wxParse/wxParse.js
5.使用 WxParse.wxParse方法
image.png
解析.png
WxParse.wxParse('article', 'html', res.data.rows[0].content, this);
这样就可以使得ueditor在微信小程序上较好的发挥了。