uniapp-rich-text(富文本中图片预览功能实现)

使用rich-text渲染富文本,实现里面内容图片预览功能

//template里面的代码
 <rich-text  space='emsp'  @click="点击事件" :data-nodes="数据"  :nodes="数据" ></rich-text>
 

js里面的代码

// 富文本预览图片
     
		showImg(e){
			let contentimg=e.target.dataset.nodes;
			let imgs=contentimg.match(/<img[^>]+>/g);//把img所有节点的图片选择出来
			let arrImg=[];
			//遍历标签拼拿到你的图片的src里面的内容放在我们数组中
			for(var j=0;j<imgs.length;j++){
				imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi,function(match,capture){
					arrImg.push(capture)
				})
			}
			//最后一步就是把我们的所有图片放在预览的api中就可以了
			uni.previewImage({
				current:arrImg,
				urls:arrImg,
			})
			
			
			
		},

总结(问题)

  1. 因为我们点击事件(一直指向的都是富文本的元素,点不到具体的元素,所以,要是有多张图片的话,会出现预览图片永远都是从第一张开始的,而指不到具体的图片,所以目前还有很好的办法,有知道的同学可以下方留言,一起交流一下哦)
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值