文本图片溢出,超出的问题"/>
uniapp解析富文本图片溢出,超出的问题
1、在App.vue组件中(h5),直接在App.vue修改即可:
/*覆盖文本编辑器里面的图片的大小*/
uni-rich-text img {max-width: 100% !important;
}
2、关于小程序和APP里面图片溢出问题,可以通过正则的方式,给图片添加宽度100%,高度auto的样式 借鉴文章(附上原文:.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);
效果 :
更多推荐
uniapp解析富文本图片溢出,超出的问题
发布评论