微信小程序整合使用富文本編輯器的方法詳解
本文實(shí)例講述了微信小程序整合使用富文本編輯器的方法。分享給大家供大家參考,具體如下:
使用WxParse插件實(shí)現(xiàn)小程序的富文本顯示 ,下載地址:富文本插件WxParse
具體使用步驟:
1. 復(fù)制插件文件夾到項(xiàng)目根目錄,emojis是表情包,可選擇性刪除
2. 在.js文件中引入WxParse模塊
var WxParse= require('../../../wxParse/wxParse.js');
3. 在.wxss文件中引入WxParse.wxss樣式,也可以在app.wxss中引入
@import"../../../wxParse/wxParse.wxss";
4. 數(shù)據(jù)綁定
var article= '<div>我是HTML代碼</div>'; var that = this; WxParse.wxParse('article', 'html', article,that, 5); /** * WxParse.wxParse(bindName , type, data,target,imagePadding) * 1.bindName綁定的數(shù)據(jù)名(必填) * 2.type可以為html或者md(必填) * 3.data為傳入的具體數(shù)據(jù)(必填) * 4.target為Page對(duì)象,一般為this(必填) ** 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選) */
5. 在.wxml文件中引用模板文件
//導(dǎo)入文件 <import src="../../../wxParse/wxParse.wxml" /> //引用模版 <template is="wxParse" data="{{wxParseData:article.nodes}}" /> /** data中的article為bindName */
實(shí)際開(kāi)發(fā)中遇到的問(wèn)題
1.圖片路徑需要修改,添加基路徑
在wxParse.js文件中的主函數(shù)入口中有這樣一段:說(shuō)明調(diào)用到了格式化數(shù)據(jù)的方法
transData = HtmlToJson.html2json(data, bindName);
2. 在html2json.js文件中,將變量__placeImgeUrlHttps設(shè)置為app的基路徑:
var __placeImgeUrlHttps = getApp().data.baseUrl;
3. 在html2json.js文件的html2json方法中有這樣一段代碼:
imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
將該代碼改為:
imgUrl = __placeImgeUrlHttps + imgUrl;
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
layer插件實(shí)現(xiàn)在彈出層中彈出一警告提示并關(guān)閉彈出層的方法
今天小編就為大家分享一篇layer插件實(shí)現(xiàn)在彈出層中彈出一警告提示并關(guān)閉彈出層的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JS實(shí)現(xiàn)的數(shù)組全排列輸出算法
這篇文章主要介紹了JS實(shí)現(xiàn)的數(shù)組全排列輸出算法,實(shí)例分析了全排列的原理與相關(guān)的javascript實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03js 點(diǎn)擊a標(biāo)簽 獲取a的自定義屬性方法
下面小編就為大家?guī)?lái)一篇js 點(diǎn)擊a標(biāo)簽 獲取a的自定義屬性方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11原生JS實(shí)現(xiàn)風(fēng)箱式demo,并封裝了一個(gè)運(yùn)動(dòng)框架(實(shí)例代碼)
下面小編就為大家?guī)?lái)一篇原生JS實(shí)現(xiàn)風(fēng)箱式demo,并封裝了一個(gè)運(yùn)動(dòng)框架(實(shí)例代碼)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07js獲取GridView中行數(shù)據(jù)的兩種方法 分享
這篇文章介紹了js獲取GridView中行數(shù)據(jù)的方法,有需要的朋友可以參考一下2013-07-07如何通過(guò)JS實(shí)現(xiàn)日歷簡(jiǎn)單算法
這篇文章主要介紹了如何通過(guò)JS實(shí)現(xiàn)日歷簡(jiǎn)單算法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10JS簡(jiǎn)單實(shí)現(xiàn)文件上傳實(shí)例代碼(無(wú)需插件)
注意一下:在chrome瀏覽器下,為了數(shù)據(jù)安全,隱藏的input:file不能trigger “click” 事件。 所以要設(shè)置input:file的透明度達(dá)到隱藏的效果2013-11-11javascript 文件的同步加載與異步加載實(shí)現(xiàn)原理
本文將介紹javascript 文件的同步加載與異步加載實(shí)現(xiàn)原理,需要了解的朋友可以了解下2012-12-12顯示今天的日期js代碼(陽(yáng)歷和農(nóng)歷)
這篇文章主要介紹了Js中顯示日期和農(nóng)歷的代碼,很簡(jiǎn)單,但很實(shí)用,有圖片,需要的朋友可以參考下2014-09-09