小程式如何接入富文本編輯？

小程式如何存取富文本編輯？下面這篇文章跟大家介紹一下。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

微信小程式中例如活動說明，簡介這樣的圖文介紹說明頁面，後台通常配置成富文本編輯框，由後台直接輸入內容，然後在小程序介面展現。但是富文本編輯提取到內容是html格式的，寫法與小程式的wxml並不一致，那麼怎麼樣才能做到富文本能夠在小程式頁面中顯示呢？

有位大牛開發了一個模板叫做wxParse，可以直接引入小程式使用。

引入方式及使用方法

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

.js程式碼：

const app = getApp()
//引入wxParse var WxParse = require(\'../../../components/wxParse/wxParse.js\');
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.showLoading({
title: \'加载中\',
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部分要注意兩點:

第一點是在page函數之前引入wxParse

第二點是在取得到html後執行

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

其中的article就是取得到的html程式碼

這類文章相信也有不少，這種元件的寫法還是老式的小程式寫法，小程式新版的元件寫法已經跟現在不一樣了，不知道這個外掛程式的開發者以後會不會也轉換為最新的方式。總之，現在小程式還是支持這種寫法的。

推薦：《小程式開發教學》

以上是小程式如何接入富文本編輯？的詳細內容。更多資訊請關注PHP中文網其他相關文章！