小程序
小游戏
企业微信
微信支付
扫描小程序码分享
rich-text怎么实现图片预览
14 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好,目前暂不支持此功能。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
previewImage?
我也遇到这个问题了,想了个曲线救国的办法,点击组件 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>
那有什么办法能把富文本组件中的图片放大显示啊?不然用户根本看不清楚啊。
可以把内容中图片提取出来 不过没法定位点击哪张图片预览
在img里写bindtap也解析不出来,用wxparse有个问题,当富文本结构复杂的时候不可能一个个的赋变量,然后调用模板,循环套循环,单个模板要怎么实现了
那就是不能直接把这样的结构赋值给富文本组件显示了,要全部换成调用模版了。。
难度好大。。。
刚才的说法有些误导人,应该理解成封闭容器比较好,毕竟所有富文本标签都是按照规定的属性来的
针对楼上的方案做简单的回答:
1、你可以把 rich-text 理解成一个容器,容器内的元素是没法添加事件的,容器内的元素是没法添加事件的,是没法添加事件的,也就是点击富文本,事件只是在 rich-text 上触发。
2、如果需求是需要点击图片预览,那你现在只是做了一半工作,剩下的工作就是把 nodes<Array>再转成微信小程序的template格式,例如你需要图片事件点击,那就要把数据转成image组件,实现类似这样的模板 https://github.com/icindy/wxParse/blob/master/wxParse/wxParse.wxml#L21。
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好,目前暂不支持此功能。
previewImage?
我也遇到这个问题了,想了个曲线救国的办法,点击组件 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>
那有什么办法能把富文本组件中的图片放大显示啊?不然用户根本看不清楚啊。
可以把内容中图片提取出来 不过没法定位点击哪张图片预览
在img里写bindtap也解析不出来,用wxparse有个问题,当富文本结构复杂的时候不可能一个个的赋变量,然后调用模板,循环套循环,单个模板要怎么实现了
那就是不能直接把这样的结构赋值给富文本组件显示了,要全部换成调用模版了。。
难度好大。。。
刚才的说法有些误导人,应该理解成封闭容器比较好,毕竟所有富文本标签都是按照规定的属性来的
针对楼上的方案做简单的回答:
1、你可以把 rich-text 理解成一个容器,容器内的元素是没法添加事件的,容器内的元素是没法添加事件的,是没法添加事件的,也就是点击富文本,事件只是在 rich-text 上触发。
2、如果需求是需要点击图片预览,那你现在只是做了一半工作,剩下的工作就是把 nodes<Array>再转成微信小程序的template格式,例如你需要图片事件点击,那就要把数据转成image组件,实现类似这样的模板 https://github.com/icindy/wxParse/blob/master/wxParse/wxParse.wxml#L21。