富文本 rich-text
用于渲染 html 內容
wxml:
<rich-text nodes="{{essayContent}}"></rich-text>
js:
data: {
essayContent: "<p>沙塵暴來臨時，人們開始追索源頭，通過衛星遙感發現，此次隨氣流空運而來的沙子并不是國產貨，沙源地位于蒙古國南部的戈壁沙漠。隨著氣溫顯著回暖，沙源地提前解凍，而同時期降水又偏少，植被長不出來，導致地表沙土裸露。</p><p><img src=\"https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/05/ChMkJlbKyYCIVFVFABBPrl_EfbkAALIOwD7jb0AEE_G253.jpg\"></p><p><br></p><p>隨著冷鋒經過沙源地，近地面大風攜帶大量顆粒物向東南方向推進，造成的沙塵天氣波及到我國北方大部分地區。</p><p> </p><p>最近頻繁的沙塵暴揭開了蒙古國環境惡化的面紗：近幾十年來，因氣候變遷和人為破壞導致了大面積荒漠化、水土流失、空氣污染等問題。</p><p><br></p><p>中央氣象臺已經發布沙塵暴黃色預警，受一股全能型冷空氣的影響，從昨晚到今天，沙塵天氣基本覆蓋北方大部地區，西北、華北、東北地區中西部、黃淮等地將先后出現沙塵。</p>",
},
適配頁面 發現圖片會超出屏幕，處理圖片自適應，給 <img/>標簽添加屬性 控制
parseRich:function(content) {
const singalList = [
['"', '"'],
['&', '&'],
['<', '<'],
['>', '>'],
[' ', ' ']
];
const tagList = ['p', 'span', 'img', 'a', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'font', 'b', 'i', 'u', 'code', 'table', 'tr', 'td', 'th']
singalList.forEach(i => {
content = content.replace(new RegExp(i[0], 'g'), i[1])
})
tagList.forEach(i => {
content = content.replace(new RegExp(`<${i} `, 'gi'), `<${i} class="rich_${i}" `)
})
return content;
}
在對應頁面中 wxss 中設置圖片屬性：
.rich_img{
max-width: 100% !important;
height: auto;
}
調用方法對數據處理：
that.setData({
essayContent: uitl.parseRich(data.description),
})
富文本編輯器 editor
editor - 相關API
editor 是 微信官方提供的一款 微信小程序富文本編輯器，可以對圖片、文字進行編輯，目前不支持插入視頻。編輯器導出的內容支持 html 和 純文本。
官方示例樣式，需要下載示例代碼進行導入。
示例代碼：https://developers.weixin.qq.com/s/W7uZ3EmU7jbl
1679540799107.jpg
為 editor 設置內容
if(htmlCont){
wx.createSelectorQuery().in(that).select('#editor').context(function (res) {
that.editorCtx = res.context;
that.editorCtx.setContents({
html: htmlCont
})
}).exec()
}
這里必須獲取that.editorCtx 對象，在onEditorReady()初始化后，直接調用設置內容 有時回顯有時不回顯。
獲取 editor 編輯的內容
that.editorCtx.getContents({
success(res) {
// console.log('complete====', res)
let html = res.html;
let text = res.text;
}
})
插入圖片，這里插入的是url, 需要上傳圖片后設置 圖片路徑即可
insertImage() {
const that = this;
wx.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album', 'camera'],
camera: 'back',
success(res) {
let img = res.tempFiles[0].tempFilePath;
// 上傳圖片 獲取圖片路徑 webRequest.uploadFile()自定義的圖片上傳方法
webRequest.uploadFile(img).then(res => {
if(res.code == 200){
let imgUrl = res.data.url;
// 獲取圖片路徑后 插入圖片
that.editorCtx.insertImage({
src:imgUrl,
success: function () {
console.log('insert image success')
}
})
}else{
wx.showToast({
title: '圖片插入失敗，請重新操作',
icon:'none'
})
}
})
}
})
}
微信小程序富文本相關使用，針對自己在開發過程中遇到的問題進行記錄，如有更好的建議或其他看法，請指出，共同進步。感謝。
最后最后 還是送自己一句話：過日子過的是以后，不是從前。
