收藏
回答

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

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




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


回答关注问题邀请回答
收藏

7 个回答

  • 🤔
    🤔
    2019-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

    }


    2019-12-05
    赞同 3
    回复 2
    • Anna
      Anna
      2019-12-05
      谢谢呀
      2019-12-05
      2
      回复
    • TeRiRi
      TeRiRi
      02-12
      感谢,
      02-12
      回复
  • 小灰灰
    小灰灰
    2019-11-28

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


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

    图片上传的时候可以给个100%


    this.editorCtx.insertImage({

    src: this.data.imgUrl + img,

    width: '100%'

    });


    23小时前
    赞同
    回复
  • 卢霄霄
    卢霄霄
    2019-10-10

    能做个代码片段吗

    2019-10-10
    赞同
    回复 11
    查看更多(6)
  • 青青子衿
    青青子衿
    2019-10-09

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

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

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

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

    不能给个CSS??

    2019-10-09
    赞同
    回复 6
    查看更多(1)
登录 后发表内容
问题标签