微信小程序rich-text标签遇到的图片和文本的问题

最新推荐文章于 2024-08-20 16:51:14 发布

原创最新推荐文章于 2024-08-20 16:51:14 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #html

微信小程序专栏收录该内容

3 篇文章

订阅专栏

在微信小程序开发中，使用rich-text标签显示富文本时遇到图片自适应和文本换行问题。通过正则替换img和span标签，添加样式解决。最终实现图片全尺寸显示，文本自动换行。

微信小程序rich-text标签遇到的图片和文本的问题

（解决rich-text文本里的图片不能正常显示，和文本自带样式的问题）

最近在开发小程序，需求就是：编辑器里自带的div、p、span等标签正常的展示在小程序里，然后了解了这个rich-text标签，挺好的，但是我遇到了问题，就是图片不能自适应（图一），文本居然不能自动换行（这个在后台打印出来的原来的span标签自带了样式（图二））
在这里插入图片描述

因为第一次用rich-text 所以百度了下用replace来处理，像网上一样的

// wxml
 <rich-text class="" nodes="{{item.ReplyContent}}"></rich-text>

// js
//我这里是封装了requset  .then后面的就是请求成功的函数
  getDetailMessage(){
   request(
     {
       url:config.askQuestion_url,
       data:{
        action:'xxx',
        id:
       }
     
     }
     ).then(res=>{
       var commentList=res.data.commentList; 
       //因为我这里是一个数据列表 每个列表里都有图片 所以for循环
       for (let i = 0, len =commentList.length; i < len; i++) 
        commentList[i].ReplyContent =commentList[i].ReplyContent.replace('<img ', '<img class="rich-img" style="max-width:100%;height:auto;display:block;margin:10px 0;"')
       }
       this.setData({
     
    
       })
     })
  },

这样操作之后发现不行，在一条数据里有多个img标签的时候，它只匹配了第一个成功
在这里插入图片描述
也就是只有第一个图片起效果了，然后进行第二次改动,解决了多个图片的正常显示，和文本的折行问题

getDetailMessage(){
   request(
     {
       url:config.askQuestion_url,
       data:{
        action:'xxx',
        id:
       }
     
     }
     ).then(res=>{
       var commentList=res.data.commentList; 
       //因为我这里是一个数据列表 每个列表里都有图片 所以for循环
       for (let i = 0, len =commentList.length; i < len; i++) {
       let regex = new RegExp('<img');
       let regSp = new RegExp('<span');
        commentList[i].ReplyContent =commentList[i].ReplyContent.replace(/\<img/gi, '<img class="rich-img" style="max-width:100%;height:auto;display:block;margin:10px 0;"')
        commentList[i].ReplyContent =commentList[i].ReplyContent.replace(/\<span/gi, '<span class="rich_span"')
              console.log(commentList[i].ReplyContent) 
       }
       this.setData({
     
    
       })
     })
  },

//wxss 里 上面的 添加的rich-img的class类名 可以不要
.rich_span{
 white-space: normal !important;
 }