微信小程序 - 富文本編輯器中圖片寬度設置

在做商城類的小程序項目時，我們會經常遇到的一個問題就是：商品詳情中的圖文詳情是后端返回的一個html代碼字符串，且自帶樣式，此時若后端傳一張寬度過大的圖片會導致其整個頁面樣式的不和諧，也就是如下圖所示：

后端返回代碼如下：

{
    "code": 1,
    "data": {
        "id": 174,
        "goods_images": ["https://chyxg.oss-cn-zhangjiakou.aliyuncs.com/155072204330.jpg"],
        "goods_price": "128.00",
        "original_price": "199.00",
        "own_integral": 8,
        "freight": "6.00",
        "name": "20192019春季女裝新款修身顯瘦字母刺綉短袖上衣短款T恤",
        "describe": "2019春季女裝新款修身顯瘦字母刺綉短袖上衣短款T恤",
        "goods_detail": "<h1 style="margin: 0px;
        padding: 0px 0px 0.2em;
        font - size: 16px;
        font - family: ">2019春季女裝新款修身顯瘦字母刺綉短袖上衣短款T恤</h1><h1 style="margin: 0px;
        padding: 0px 0px 0.2em;
        font - size: 16px;
        font - family: ">2019春季女裝新款修身顯瘦字母刺綉短袖上衣短款T恤</h1><h1 style="margin: 0px;
        padding: 0px 0px 0.2em;
        font - size: 16px;
        font - family: ">2019春季女裝新款修身顯瘦字母刺綉短袖上衣短款T恤</h1><p><br/></p><p><img src="https: //chyxg.oss-cn-zhangjiakou.aliyuncs.com/image/155072205061.jpg" title="9071398560615.jpg" alt="O1CN01UYNHF81WjQz0SuY2I_!!667772824.jpg"/><img src="https://chyxg.oss-cn-zhangjiakou.aliyuncs.com/image/155072205488.jpg" title="1073188377953.jpg" alt="O1CN01vwMgu51WjQz6hcfUB_!!667772824.jpg"/></p>",
        "start_time": 0,
        "end_time": 0,
        "sell_num": 1,
        "sales": 5,
        "nums": 192,
        "limit_num": 10,
        "diff_time": 0,
        "is_jump": 1,
        "new_time": 1550988432,
        "num": 95,
        "opinion_count": 0,
        "collected_count": 5,
        "opinion_content": {},
        "is_collected": 0
    },
    "msg": "查詢商品詳情成功！"
}

由於后端返回的是 img標簽，在小程序中渲染不出，也就不能直接用img標簽選擇器去限定其樣式，此時我們可以通過添加class類名去設置，也就是遍歷數據dada中goods_detail字符串進行替換操作。

var _str = res.data.data.goods_detail.replace(/<img /g, '<img class="rich_img" ');
console.log(_str)

得到的字符串為

<h1 style="margin: 0px; padding: 0px 0px 0.2em; font-size: 16px; font-family: ">2019春季女裝新款修身顯瘦字母刺綉短袖上衣短款T恤</h1><h1 style="margin: 0px; padding: 0px 0px 0.2em; font-size: 16px; font-family: ">
2019春季女裝新款修身顯瘦字母刺綉短袖上衣短款T恤</h1><h1 style="margin: 0px; padding: 0px 0px 0.2em; font-size: 16px; font-family: ">2019春季女裝新款修身顯瘦字母刺綉短袖上衣短款T恤</h1><p><br/></p>
<p><img class="rich_img" src="https://chyxg.oss-cn-zhangjiakou.aliyuncs.com/image/155072205061.jpg" title="9071398560615.jpg" alt="O1CN01UYNHF81WjQz0SuY2I_!!667772824.jpg"/>
<img class="rich_img" src="https://chyxg.oss-cn-zhangjiakou.aliyuncs.com/image/155072205488.jpg" title="1073188377953.jpg" alt="O1CN01vwMgu51WjQz6hcfUB_!!667772824.jpg"/></p>

此時我們就可以在wxss中設置其圖片的相應屬性如寬高等。

.rich_img{
  max-width:694rpx !important;
}

最終效果圖如下：