微信小程序开发:整合使用富文本编辑器的方法
使用WxParse插件实现小程序的富文本显示 。
具体使用步骤:
1. 复制插件文件夹到项目根目录,emojis是表情包,可选择性删除
2. 在.js文件中引入WxParse模块
var WxParse= require('../../../wxParse/');
3. 在.wxss文件中引入样式,也可以在中引入
@import"../../../wxParse/";
4. 数据绑定
var article= '<div>我是HTML代码</div>'; var that = this; ('article', 'html', article,that, 5); /** * (bindName , type, data,target,imagePadding) * 绑定的数据名(必填) * 可以为html或者md(必填) * 为传入的具体数据(必填) * 为Page对象,一般为this(必填) ** 为当图片自适应是左右的单一padding(默认为0,可选) */
5. 在.wxml文件中引用模板文件
//导入文件 <import src="../../../wxParse/" /> //引用模版 <template is="wxParse" data="{{wxParseData:}}" /> /** data中的article为bindName */
实际开发中遇到的问题
1.图片路径需要修改,添加基路径
在文件中的主函数入口中有这样一段:说明调用到了格式化数据的方法
transData = (data, bindName);
2. 在文件中,将变量__placeImgeUrlHttps设置为app的基路径:
var __placeImgeUrlHttps = getApp().data.baseUrl;
3. 在文件的html2json方法中有这样一段代码:
imgUrl = (imgUrl, __placeImgeUrlHttps);
将该代码改为:
imgUrl = __placeImgeUrlHttps + imgUrl;
THE END