收藏
回答

rich-text 解析富文本 图片过大 如何自定义大小?

从后台查出来的富文本数据,使用 rich-text 进行展示时,其中的图片过大,超出屏幕。




真的是一点效果都没有,我都要急疯了,大佬们救救我把,


最后一次编辑于  10-09
回答关注问题邀请回答
收藏

6 个回答

  • 🤔
    🤔
    12-05

    刚好遇到了 ,发下我的处理方法吧

    //details要处理的内容

    const replaceDetail = function(details){

    var texts='';//待拼接的内容

    while(details.indexOf('<img')!=-1){//寻找img 循环

    texts+=details.substring('0',details.indexOf('<img')+4);//截取到<img前面的内容

    details = details.substring(details.indexOf('<img')+4);//<img 后面的内容

    if(details.indexOf('style=')!=-1 && details.indexOf('style=')<details.indexOf('>')){

    texts+=details.substring(0,details.indexOf('style="')+7)+"max-width:100%;height:auto;margin:0 auto;";//从 <img 后面的内容 截取到style= 加上自己要加的内容

    details=details.substring(details.indexOf('style="')+7); //style后面的内容拼接

    }else{

    texts+=' style="max-width:100%;height:auto;margin:0 auto;" ';

    }

    }

    texts+=details;//最后拼接的内容

    return texts

    }


    12-05
    赞同 2
    回复 1
    • Anna
      Anna
      12-05
      谢谢呀
      12-05
      2
      回复
  • 小灰灰
    小灰灰
    11-28

    楼主,这个问题解决了吗,我也是通过样式,width什么的都不能起作用。如果看到希望可以回复下,在线等


    11-28
    赞同 1
    回复 7
    • Anna
      Anna
      11-29
      你首先打印一下你的富文本内容,img里面的是style里面width嘛,如果是,那就用正则把style只全部替换成你要的
      11-29
      回复
    • 你的微笑
      你的微笑
      11-29
      你可以用parser插件,给图片设置属性,就可以解决
      11-29
      回复
    • 小灰灰
      小灰灰
      11-29回复Anna
      但是这样替换的话,用户在富文本中给图片添加的一些样式,如何保留呢?因为图片默认会携带一个style过来,如果替换他的style,携带过来的样式就会丢失
      11-29
      回复
    • 小灰灰
      小灰灰
      11-29回复你的微笑
      嗯嗯,你说的这个插件我有看过,不过这边现在应该是不考虑插件的
      11-29
      回复
    • Anna
      Anna
      11-29回复小灰灰
      我这边不考虑用户设置的img style,
      11-29
      回复
    查看更多(2)
  • 卢霄霄
    卢霄霄
    10-10

    能做个代码片段吗

    10-10
    赞同
    回复 10
    • Anna
      Anna
      10-10
      可以
      10-10
      回复
    • Anna
      Anna
      10-10
      https://developers.weixin.qq.com/s/rrGmf0mq7Jc6
      10-10
      回复
    • 卢霄霄
      卢霄霄
      10-10回复Anna
      你img标签里有多个 style标签。。
      10-10
      回复
    • Anna
      Anna
      10-10回复卢霄霄
      我复制错了,这个是没有style  
      https://developers.weixin.qq.com/s/CBKtj0mj7Cc3
      10-10
      回复
    • 卢霄霄
      卢霄霄
      10-10回复Anna
      img里有个空的 style="" 把它去了吧
      10-10
      回复
    查看更多(5)
  • 子悠
    子悠
    10-09

    wxParse-微信小程序富文本解析自定义组件,可以使用这个组件,git地址https://github.com/icindy/wxParse

    10-09
    赞同
    回复
  • 拾忆
    拾忆
    10-09

    在获取到的富文本字符串里格式化下图片相关的标签删除里面的style,再把处理后的字符串传给组件。具体怎么做自己百度。

    10-09
    赞同
    回复
  • 戏多多💎
    戏多多💎
    10-09

    不能给个CSS??

    10-09
    赞同
    回复 6
    • Anna
      Anna
      10-09
      不知道怎么给,我在rich-text标签上面给了一个,然后css里面 .类名 img{max-width:100%};没有任何效果。
      10-09
      回复
    • 戏多多💎
      戏多多💎
      10-09回复Anna
      全局img呢?
      10-09
      回复
    • 戏多多💎
      戏多多💎
      10-09回复Anna
      res.content = content.replace(/\
      10-09
      回复
    • 戏多多💎
      戏多多💎
      10-09回复Anna
      10-09
      1
      回复
    • 戏多多💎
      戏多多💎
      10-09回复戏多多💎
      正则替换吧
      10-09
      回复
    查看更多(1)
问题标签