富文本内容里的图片放在h5适应(大于边框的宽度/300的宽度适应,其余不变,样式取消掉)

Posted 羽梓橙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了富文本内容里的图片放在h5适应(大于边框的宽度/300的宽度适应,其余不变,样式取消掉)相关的知识,希望对你有一定的参考价值。

if(richContent != null){
        let index = 0 //width= 第一次出现的位置
        let index2 = 0 // 宽度值结尾下标
        let str = \'\' //截图width=  之后的内容
        let widths = 0
        let img = \'\'
        if(richContent.indexOf(/<img1*>/gi) >= 0){
          richContent= richContent.replace(/<img1*>/gi,function(match,capture){
            img = JSON.parse(JSON.stringify(match))
            index = img.indexOf(\'width=\')
            str = img.substring(index+6,img.length)
            index2 = str.indexOf(\'"\',1)
            widths=str.substring(1,index2)
            if(widths>300){
              match = match.replace(/style="2+"/gi, \'\').replace(/style=\'3+\'/gi, \'\');
              match = match.replace(/fnref-2">2+"/gi, \'\').replace(/width=\'3+\'/gi, \'\');
              match = match.replace(/fnref-2">2+"/gi, \'\').replace(/height=\'3+\'/gi, \'\');
              return match;
            }else{
              return match;
            }
          });
          if(widths>300){
            richContent = richContent.replace(/style="2+"/gi,function(match,capture){
              match = match.replace(/width:4+;/gi, \'max-width:100%;\').replace(/width:4+;/gi, \'max-width:100%;\');
              return match;
            });
            richContent = richContent.replace(/<br1*/>/gi, \'\');
            richContent = richContent.replace(/\\<img/gi, \'<img style="max-width:100%;margin:0 auto;display:inline-block"\');  
          }else{
            return match;
          }
        }
        this.richContent = richContent;
      }else{
        this.richContent = \'\'
      }


  1. > ↩
  2. " ↩
  3. \' ↩
  4. ; ↩

以上是关于富文本内容里的图片放在h5适应(大于边框的宽度/300的宽度适应,其余不变,样式取消掉)的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序不使用插件,渲染富文本中的视频,图片自适应,plus版本

如何使div中的图片自适应宽度和高度,图片不变形,可以超出div,超出部分隐藏

如何使div中的图片自适应宽度和高度,图片不变形,可以超出div,超出部分隐藏

富文本编辑器宽度自适应及取消自动保存功能

新一代富文本编辑器——CKEditor5

调整标题元素的底部边框以适应文本宽度并响应