富文本 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'
})
}
})
}
})
}
微信小程序富文本相关使用，针对自己在开发过程中遇到的问题进行记录，如有更好的建议或其他看法，请指出，共同进步。感谢。
最后最后 还是送自己一句话：过日子过的是以后，不是从前。
