我也遇到这个问题了,想了个曲线救国的办法,点击组件 rich-text 然后拿到它的所有文本,以字符串截取的形式、用正则获取文本中所有的src路径,然后把这些路径存放在新数组中,直接调用图片预览,这是我写的练习,测试了可以,缺陷是不能按照点击图片的顺序预览,只能从头预览
test:function(e){
let that=this
console.log(“e”, this.data.htmlVal)
let arr=[];
let reg = /(?<=(src="))[^"]*?(?=")/ig
let allSrc = that.data.htmlVal.match(reg)
for (let i = 0; i<allSrc.length;i++){
console.log(“e000”, allSrc[i])
arr.push(allSrc[i])
that.setData({
imageArray:arr
})
}
wx.previewImage({
current: that.data.imageArray, // 当前显示图片的http链接
urls: that.data.imageArray // 需要预览的图片http链接列表
})
}
<rich-text nodes="{{htmlVal}}" bindtap=“test”></rich-text>
针对楼上的方案做简单的回答:
1、你可以把 rich-text 理解成一个容器,容器内的元素是没法添加事件的,容器内的元素是没法添加事件的,是没法添加事件的,也就是点击富文本,事件只是在 rich-text 上触发。
2、如果需求是需要点击图片预览,那你现在只是做了一半工作,剩下的工作就是把 nodes<Array>再转成微信小程序的template格式,例如你需要图片事件点击,那就要把数据转成image组件,实现类似这样的模板 https://github.com/icindy/wxParse/blob/master/wxParse/wxParse.wxml#L21。