微信小程序富文本编辑的图片超出

Posted 2023-04-05

参考技术A 最近在小程序项目时候遇到加载的富文本编辑器的图片超出部分小程序宽度 只要是img的标签没有设置宽度导致的。设置一下宽度就可以了

onLoad: function (option)

    if (option.id == '' || option.id == undefined)

      return false;

   

    var id = option.id;

    this.setData(

      id:id

    );

    var that = this;

    app.util.request(

      url: 'entry/wxapp/getsever',

      data:

        m: 'u_tanfang',

        ids: id

      ,

      cachetime: 0,

      method: 'post',

      complete: function (res)

        console.log(res.data.data);

        res.data.data.content = that.formatRichText(res.data.data.content); //使用地方

        var  doortimes = [];

        that.setData(

          doortimes:doortimes,

          data: res.data.data,

          doortime_list:res.data.data.doortime_list,

        );

     

    );

    this.getproblem();

    this.getUser();

  ,

  formatRichText:function (html)

    let newContent= html.replace(/\<img/gi, '<img style="width:100%;height:auto"');

    return newContent;

  ,

微信小程序富文本中的图片大小超出屏幕

这个问题我在小程序社区中提的，后来有个帮我回答了这个问题，我试了一下可以。

解决办法是过滤富文本内容，给图片标签添加一个样式，限制图片的最大宽度。

replace(/<img/gi,   ‘<img class="rich-img" ‘ );

就可以了

rich-text   .rich-img {

width: 100% ;

height: auto ;

}