微信小程式使用富文本編輯器

使用WxParse插件實作小程式的富文本顯示 ，下載下傳位址：富文本插件WxParse

具體使用步驟：

1. 複制插件檔案夾到項目根目錄，emojis是表情包，可選擇性删除

2. 在.js檔案中引入WxParse子產品

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

3. 在.wxss檔案中引入WxParse.wxss樣式，也可以在app.wxss中引入

@import"../../../wxParse/wxParse.wxss";
           

4. 資料綁定

var article= '<div>我是HTML代碼</div>';  

var that = this; 

WxParse.wxParse('article', 'html', article,that, 5);

/** 

* WxParse.wxParse(bindName , type, data,target,imagePadding) 

* 1.bindName綁定的資料名(必填) 

* 2.type可以為html或者md(必填) 

* 3.data為傳入的具體資料(必填) 

* 4.target為Page對象,一般為this(必填) 

** 5.imagePadding為當圖檔自适應是左右的單一padding(預設為0,可選) 

*/
           

5. 在.wxml檔案中引用模闆檔案

//導入檔案 

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

//引用模版 

<template is="wxParse" data="{{wxParseData:article.nodes}}" />

/** data中的article為bindName */
           

實際開發中遇到的問題

1.圖檔路徑需要修改，添加基路徑

1. 在wxParse.js檔案中的主函數入口中有這樣一段：說明調用到了格式化資料的方法

transData = HtmlToJson.html2json(data, bindName); 

2. 在html2json.js檔案中，将變量__placeImgeUrlHttps設定為app的基路徑：

var __placeImgeUrlHttps = getApp().data.baseUrl;

3. 在html2json.js檔案的html2json方法中有這樣一段代碼：

imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);

将該代碼改為：

imgUrl = __placeImgeUrlHttps + imgUrl;