uniapp解析富文本图片溢出,超出的问题

最新推荐文章于 2025-06-28 14:32:45 发布

转载最新推荐文章于 2025-06-28 14:32:45 发布 · 5.7k 阅读

17 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/qq_37682202/article/details/100522172

文章标签：

#图片溢出 #富文本解析 #uniapp-rich-text组件 #正则替换

uniapp问题专栏收录该内容

30 篇文章

订阅专栏

1、在App.vue组件中（h5），直接在App.vue修改即可：

/*覆盖文本编辑器里面的图片的大小*/
uni-rich-text img {
	max-width: 100% !important;
}

2、关于小程序和APP里面图片溢出问题，可以通过正则的方式，给图片添加宽度100%,高度auto的样式借鉴文章（附上原文：https://www.jb51.net/article/154976.htm）

代码

/* 
	 * 处理富文本里的图片宽度自适应
	 * 1.去掉img标签里的style、width、height属性
	 * 2.img标签添加style属性：max-width:100%;height:auto
	 * 3.修改所有style里的width属性为max-width:100%
	 * 4.去掉<br/>标签
	 * @param html
	 * @returns {void|string|*}
	 */
	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;
	}

调用方法

/* 格式化富文本内容 */
let context = this.$comment.formatRichText(item.content);

效果：