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

在作商城類的小程序項目時，咱們會常常遇到的一個問題就是：商品詳情中的圖文詳情是後端返回的一個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;
}

最終效果圖以下：