微信小程序加载并且编译显示富文本编辑器内容

微信小程序如何加载并且显示百度编辑器中的内容
一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可)
二. 在js文件中引入wxParse.js

var WxParse = require('../../wxParse/wxParse.js');

三. 使用WxParse.wxParse进行内容编辑转义
我这里的res.data.data.content就是接口返回来的富文本编辑器的内容(带图片)

onLoad: function (options) {
    var that = this;
    var id = options.id;
    wx.request({
      url: api.Info,
      data:{id},
      method: 'GET',
      success: function (res) {
        that.setData({
          info: res.data.data,//资讯详情
        })
        if(res.data.data.content){
          WxParse.wxParse('content', 'html', res.data.data.content, that);
        }
      },
    })
  },

if(res.data.data.content){
xxxxxx
} 我这里进行了一下判断,因为wxParse中自定义了数据为空的情况下,在页面中显示数据不能为空! 当然你们可去更改底层的文件

四. 在wxml中引入wxParse.wxml

<import src="/wxParse/wxParse.wxml" />

五. 在需要显示数据的地方,使用 template 标签, 这里的content改为你自定义的转移字段名称,其它地方直接复制使用即可,
注意: 这里如果你们已经定义过样式,可能会出现wxml中不显示数据的情况,那么很大的可能是样式冲突了,我直接使用了wxParse的样式(在显示数据的外层view的class定义为wxParse),如果样式冲突,你们可随意去调整

<view class="wxParse"> 
    <template is="wxParse" data="{{wxParseData:content.nodes}}" />
</view>

六. 在wxss中引入 wxParse.wxss(你们可以不使用它的样式)

@import "/wxParse/wxParse.wxss";

效果: