微信小程序富文本插件wxParse的使用

1.下载插件：插件下载地址


2.将下载的插件放入到项目目录下，目录结构如下：

图片：目录结构.png

3.引入插件到要使用富文本编辑的页面下
引入js:
var WxParse = require('../../wxParse/wxParse.js');


引入html:



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


引入css:



@import "/wxParse/wxParse.wxss";(注：可以在app.wxss中引入)

4.使用插件

（1）、先定义一个属性，由于我的值是由数据返回setData得到的，所以这里设为空

图片：data.png

当然也可以这样定义：
data: {
  article: '<div style="text-align:center;">《静夜思》· 李白<br />床前明月光，<br />疑是地上霜。 <br />举头望明月， <br />低头思故乡。<br /><img src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53.jpg" alt="" /><br /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53b.jpg" alt="" /><br /></div>',
}
（2）、数据绑定
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
 var that = this;
 var temp = WxParse.wxParse('article', 'html', that.data.article, that, 5);
 that.setData({
   article: temp
 })
}

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/



（3）、模板引入



<template is="wxParse" data="pw_wxParseData:article.nodes"/>




注意点

在上面的基本使用里面在.js文件和.wxml文件里面出现的article这个是两个文件里面是一样的。但是article是js文件里面的一个变量是可以变的，只要保证js文件和wxml文件里面变量名一致即可。
我的数据是这样的：

图片：22.png

在页面渲染是这样的：

图片：333.png

参考文章：http://blog.csdn.net/zhuming3834/article/details/74280038

哇，好贴呀，666.
超级干货哦，^_^