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)

uniapp解析富文本图片溢出,超出的问题_第1张图片

代码  

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

调用 方法 

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

效果 :

uniapp解析富文本图片溢出,超出的问题_第2张图片

你可能感兴趣的:(uniapp问题)