【uni-app】 rich-text 中图片溢出

前言

• Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）
• 微信小程序中预览的图片溢出效果（非期望效果）
  
• 期望的效果
  

分析

rich-text 为已封装好的组件。向 rich-text传递参数后，由 rich-text进行展现（<rich-text :nodes="content|formatRichText"></rich-text>），目前未向开发者提供控制 rich-text展现的内容样式的方法。

代码1：图片溢出的代码（对应图片溢出效果）：

<img 
style="margin: 0px auto; padding: 0px; display: block; max-width: 800px;"
src="https://img-xhpfm.zhongguowangshi.com/News/202008/20200810193928_6784.jpg" />

代码2：图片不溢出的代码（对应期望的效果）：

<img 
style="max-width:100%;height:auto;display:block;margin:0px auto;" 
src="https://img-xhpfm.zhongguowangshi.com/News/202008/20200810193928_6784.jpg" />

要解决图片溢出，只需要找到将代码1转化为代码2的方法即可。

方法

根据前面的思路，目前有2个方法:

1. nodes 为 String 类型时，用 replace 方法修改样式。
2. nodes 为 Array 类型时，遍历Array并修改节点属性（找到样式节点，并进行修改）。

因为支付宝小程序只支持nodes 为 Array 类型的使用方法，所以，方法2更通用一些，可以参考这里。
关于方法1的介绍，可以参考这里。下面介绍一下方法1。

另，下面这样的方法，在H5中有效：

	/* 在H5 rich-text 控件会被翻译为 uni-rich-text */
	uni-rich-text img {
		max-width: 100% !important;
	}

操作

1. 先编写修改样式的方法

	export default {
		components: {
		},
		data() {
			return {
			}
		},
		onReady() {
		},
		methods: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.修改所有style里的width属性为max-width:100%
			 * 3.img标签添加style属性：max-width:100%;height:auto
			 * 4.去掉<br/>标签
			 * @param html
			 * @return string
			 */
			formatRichText (html) {
				// 去掉img标签里的style、width、height属性
				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;
				});
				// 修改所有style里的width属性为max-width:100%
				newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
					return match;
				});
				// 去掉<br/>标签
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				// img标签添加style属性：max-width:100%;height:auto
				newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
				return newContent;
			}
		}
	}

2.修改样式的方法

<rich-text :nodes="formatRichText(content)"></rich-text>

3.改进

可以封装成js库，方便以后使用。

1. richTextUtil.js

/**
 * 处理富文本里的图片宽度自适应
 * 1.去掉img标签里的style、width、height属性
 * 2.修改所有style里的width属性为max-width:100%
 * 3.img标签添加style属性：max-width:100%;height:auto
 * 4.去掉<br/>标签
 * @param html
 * @return string
 */
function formatRichText (html) {
	// 去掉img标签里的style、width、height属性
	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;
	});
	// 修改所有style里的width属性为max-width:100%
	newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
		match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
		return match;
	});
	// 去掉<br/>标签
	newContent = newContent.replace(/<br[^>]*\/>/gi, '');
	// img标签添加style属性：max-width:100%;height:auto
	newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
	return newContent;
}

export default {
	formatRichText,
};

2. 引入js库

import richTextUtil from '@/common/richTextUtil.js';

3. 调用方法

this.content = richTextUtil.formatRichText(res.content);

rich-text：

<rich-text :nodes="content"></rich-text>

参考

https://blog.csdn.net/qq_37682202/article/details/100522172
https://www.jb51.net/article/154976.htm
https://www.jianshu.com/p/b87a0ff0f5b4