uniapp解析富文本圖片溢出,超出的問題

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);

效果 :

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章