小程序接入富文本編輯

小編給大家分享一下小程序接入富文本編輯，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

微信小程序中比如活動(dòng)說(shuō)明，簡(jiǎn)介這樣的圖文介紹說(shuō)明頁(yè)面，后臺(tái)通常配置成富文本編輯框，由后臺(tái)直接輸入內(nèi)容，然后在小程序界面展現(xiàn)。但是富文本編輯提取到內(nèi)容是html格式的，寫法與小程序的wxml并不一致，那么怎么樣才能做到富文本能夠在小程序頁(yè)面中顯示呢？

有位大牛開發(fā)了一個(gè)模板叫作wxParse，可以直接引入小程序使用。

引入方式及使用方法

page{
width: 100%;
height: 100%;
background: #e4382e;
overflow: auto;
}

.js代碼：

const app = getApp()
//引入wxParse var WxParse = require(\'../../../components/wxParse/wxParse.js\');
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
wx.showLoading({
title: \'加載中\(zhòng)',
mask: true
})
var that = this;
console.log(options)
that.setData({
activityId: options.activityId
})
wx.request({
url: app.globalData.subDomain + \'/GetActivityInfo\',    
data: {
token: app.globalData.token,
activity: that.data.activityId
},
method: \'POST\',
success: function(res){
//獲取html代碼             
WxParse.wxParse(\'article\', \'html\', that.data.article, that, 5);
wx.hideLoading();
}
})
}

js部分要注意兩點(diǎn):

第一點(diǎn)是在page函數(shù)之前引入wxParse

第二點(diǎn)是在獲取到html后執(zhí)行

WxParse.wxParse(\'article\', \'html\', that.data.article, that, 5)

其中的article就是獲取到的html代碼

這類文章相信也有不少，這種組件的寫法還是老式的小程序?qū)懛ǎ〕绦蛐掳娴慕M件寫法已經(jīng)跟現(xiàn)在不一樣了，不知道這個(gè)插件的開發(fā)者以后會(huì)不會(huì)也轉(zhuǎn)換為最新的方式?？傊?，現(xiàn)在小程序還是支持這種寫法的。

以上是“小程序接入富文本編輯”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！