uniapp解决富文本图片过大溢出问题

一、页面展示

<view class="textClass">
	<rich-text :nodes="ctx_content"></rich-text>
</view>

二、进行内容封装处理

export const formatRichText = (html) => {
	let newContent = html.replace(/<img[^>]*>/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(/<br[^>]*\/>/gi, '');
	newContent = newContent.replace(/\<img/gi,
		'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
	return newContent;
}

三、引入 import { formatRichText } from "***";

四、使用

data() {
	return {
            ctx_content:''
	};
},
watch:{
	conetent(val,old) {
            if(val){
		this.ctx_content = formatRichText(val);
            }
	}
},