uni-app利用rich-text展示富文本内容,图片的宽度溢出屏幕

  •   
  • 333
  • html
  • 0
  • dodobook
  • 2019/10/19

在使用Uni-app开发商城的时候,因为商品的详情是图文的,必然用到了富文本编辑器吗,富文本编辑器里面保存下来的html几乎类似这样。

<p>
<img src="https://h5.dodobook.net/ueditor/image/2019101718/989797dewasd65.jpg" title="dodobook_net.png" alt="这是一张商品的详情图片.jpg"/>
</p>

在做H5页面的时候会存在图片宽度溢出屏幕的情况。

处理办法如下。
1.在App.vue组件中(h5),直接在App.vue修改即可:


<style>
.........
	/*每个页面公共css */
	@import "./common/app.css";
	
.......
	/*覆盖文本编辑器里面的图片的大小*/
	uni-rich-text img{ max-width: 100% !important;}
</style>

2、关于小程序里面图片溢出问题,这里借鉴一个大神的文章

思路:
把图片的宽度改为手机屏幕对应的宽度
微信小程序需要知道的知识

需要知道微信小程序里有自己的宽度标准,单位为rpx;
针对所有不同尺寸的浏览器,微信小程序里规定屏幕宽为750rpx;

解决办法如下

WXML

<view class='html_detail'>
  <rich-text nodes='{{artical}}'></rich-text>
</view>

WXS

data={artical:''}
 
async onLoad(){
  const json = await api.getDetail();
  if(json !== null){
    this.artical = util.formatRichText(json.detail.description);
  }
}

若artical里只有图片,并且图片没有设置style和宽度/高度
util.js

function formatRichText(html){
  let newContent= html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"');
  return newContent;
}
 
module.exports = {
  formatRichText
}

若artical里包含多种标签
util.js

/**
 * 处理富文本里的图片宽度自适应
 * 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|*}
 */
function 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:block;margin-top:0;margin-bottom:0;"');
  return newContent;
}
 
module.exports = {
  formatRichText
}

参考地址如下:https://www.jb51.net/article/154976.htm

脑筋若无正确的思想的培养,任它怎样发达,这发达总是畸形的发达,那么一切的行为都没有稳定的正确的立足点。 —— 聂耳