uniapp小程序wangEditor富文本图片、样式失效不显示

项目场景：使用Uniapp的小程序问题描述：使用wangEditor4的富文本编辑器，在uniapp页面中插入出现大量不显示的问题Web页面中的显示正常：Uniapp小程序中问题：<rich-text :nodes="introduce"></rich-text>// Uniapp代码，也可使用v-html插入html文本原因分析：百度了好多原因，大部分都是图片比例过大的

CH妖梦

5713人浏览 · 2021-02-23 20:29:35

CH妖梦 · 2021-02-23 20:29:35 发布

项目场景：

使用Uniapp的小程序

问题描述：

使用wangEditor4的富文本编辑器，在uniapp页面中插入出现大量不显示的问题

Web页面中的显示正常：
富文本显示
Uniapp小程序中问题：
Uniapp富文本

<rich-text :nodes="introduce"></rich-text>
// Uniapp代码，也可使用v-html插入html文本

原因分析：

百度了好多原因，大部分都是图片比例过大的之后将img添加上 style=“width: 100%” 的问题，我这里的原因可能是UniApp不是很兼容figure、font、p等标签，
导致字体颜色、间距、图片全都失效

解决方案：

最后用的解决方法是用replace替换掉富文本字符串里的标签样式。替换成uniapp能够理解的标签：

getIntroduce() {
	const that = this
	return new Promise((resolve, reject) => {
		that.$api('getIntroduce').then(res => {
			that.introduce = res.data
			// 替换包着img标签的figure标签，改为能被uniapp理解的div
			that.introduce = that.introduce.replace(/\<figure/gi, '<div')
			that.introduce = that.introduce.replace(/\<\/figure>/gi, '<\/div>')
			// 为p添加内边距，尽量达到与Web端的预览相同
			that.introduce = that.introduce.replace(/\<p/gi, '\<p style=\"padding: 10px 0px;\"')
			//  为字体附上颜色
			that.introduce = that.introduce.replace(/\<font color=\"/gi, '\<font style=\"color: ')
			// 删除空的style属性，避免因为和已有的style属性冲突导致不显示
			that.introduce = that.introduce.replace(/style=""/gi, '')
		}).catch((e)=>{
			// console.log(e);
		});
	})
}