微信小程序如何加载并且显示百度编辑器中的内容
一. 下载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";
效果:
