+-
富文本内容里的图片放在h5适应(大于边框的宽度/300的宽度适应,其余不变,样式取消掉)
首页 专栏 前端 文章详情
0

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

羽梓橙 发布于 2 月 17 日

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(/width="2+"/gi, '').replace(/width='3+'/gi, '');
              match = match.replace(/height="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 = ''
      }

> ↩ " ↩ ' ↩ ; ↩
html5 前端 vue.js
阅读 20 发布于 2 月 17 日
收藏
分享
本作品系原创, 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
avatar
羽梓橙
0 声望
0 粉丝
关注作者
0 条评论
得票 时间
提交评论
avatar
羽梓橙
0 声望
0 粉丝
关注作者
宣传栏
目录

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(/width="2+"/gi, '').replace(/width='3+'/gi, '');
              match = match.replace(/height="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 = ''
      }

> ↩ " ↩ ' ↩ ; ↩