在使用Uni-app开发商城的时候，因为商品的详情是图文的，必然用到了富文本编辑器吗，富文本编辑器里面保存下来的html几乎类似这样。

<p>
<img src="https://h5.dodobook.net/ueditor/image/2019101718/989797dewasd65.jpg" title="dodobook_net.png" alt="这是一张商品的详情图片.jpg"/>
</p>

在做H5页面的时候会存在图片宽度溢出屏幕的情况。

处理办法如下。
1.在App.vue组件中（h5），直接在App.vue修改即可：

<style>
.........
	/*每个页面公共css */
	@import "./common/app.css";
	
.......
	/*覆盖文本编辑器里面的图片的大小*/
	uni-rich-text img{ max-width: 100% !important;}
</style>

2、关于小程序里面图片溢出问题，这里借鉴一个大神的文章

思路:
把图片的宽度改为手机屏幕对应的宽度
微信小程序需要知道的知识

需要知道微信小程序里有自己的宽度标准，单位为rpx；
针对所有不同尺寸的浏览器，微信小程序里规定屏幕宽为750rpx；

解决办法如下

WXML

<view class='html_detail'>
  <rich-text nodes='{{artical}}'></rich-text>
</view>

WXS

data={artical:''}
 
async onLoad(){
  const json = await api.getDetail();
  if(json !== null){
    this.artical = util.formatRichText(json.detail.description);
  }
}

若artical里只有图片，并且图片没有设置style和宽度/高度
util.js

function formatRichText(html){
let newContent= html.replace(/\标签
* @param html
* @returns {void|string|*}
*/
function formatRichText(html){
let newContent= html.replace(/]*>/gi,function(match,capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/]*\/>/gi, '');
newContent = newContent.replace(/\脑筋若无正确的思想的培养，任它怎样发达，这发达总是畸形的发达，那么一切的行为都没有稳定的正确的立足点。 —— 聂耳