How to access rich text editing in a mini program?

How to connect the mini program to rich text editing? The following article will introduce it to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

In WeChat mini programs, for example, graphic introduction pages such as activity descriptions and introductions are usually configured as rich text editing boxes in the background, and the content is input directly in the background, and then in the mini program Interface display. However, the content extracted by rich text editing is in html format, and the writing method is not consistent with the wxml of the mini program. So how can the rich text be displayed in the mini program page?

An expert has developed a template called wxParse, which can be directly introduced into small programs for use.

Introduction method and usage method

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

.js code:

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();
}
})
}

There are two points to note in the js part:

The first point is to introduce wxParse before the page function

The second point is to execute it after getting the html

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

The article is the obtained html code

This I believe there are many such articles. The writing method of this kind of component is still the old-fashioned way of writing small programs. The way of writing components of the new version of small programs is different from now. I wonder if the developer of this plug-in will also convert to the latest way in the future. In short, mini programs still support this writing method.

Recommendation: " Mini Program Development Tutorial"

The above is the detailed content of How to access rich text editing in a mini program?. For more information, please follow other related articles on the PHP Chinese website!