uniapp 小程序 中使用富文本rich-text 图片溢出问题解决方法

uniapp 小程序 中使用富文本rich-text 图片溢出问题解决方法

对于富文本框中的文字可以直接用css 修改标签样式控制，但是图片不行
对于图片 可以使用两种方式进行样式修改

1、 封装处理函数

封装公共函数 tag=true 默认图片最宽为父组件宽度，如果不需要最大宽度为父组件宽度可以给tag传false，通过class控制img的样式
在methods 函数中写入 处理函数richTextImg

//rich-text中的Img添加class 通过class 调整图片样式tag 默认图片宽度最宽为父组件宽度
//入参 value 为需要进行处理的富文本数据， tag为是否为图片添加最大宽度 
richTextImg(value,tag=true){
	if(value && value.indexOf('<img')!==-1){
		if(tag){
			return value.replace(/\<img/gi,"<img class='richTextImg' style='max-width:100%;height:auto'")
		}else{
			return value.replace(/\<img/gi,"<img class='richTextImg'")
		}
	}
	return value
}

2、 调用函数处理数据

在需要处理的富文本数据处调用

	this.content = this.richTextImg(res.data.businessStory)

3、使用数据，达到效果

1、第一种使用行内样式进行修改

<view class="u-p-20 story ">
	<scroll-view scroll-y="true" v-if="content">
		<rich-text :nodes="content"></rich-text>
	</scroll-view>
	<view v-else class="q-position-center" >
		暂无数据
	</view>
</view>

2、使用Class 类名进行样式修改 适合样式复制多样

第一步中的richTextImg 函数中已经为img 函数添加了 class类
可以直接在css 样式中修改 img样式

// 建议先为父盒子添加class 类名，以防多个富文本样式混淆
.story{
	.richTextImg{
		max-width: 100%;
	}
}

处理之前

处理之后