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

样式失效不显示"/>

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

项目场景：

使用Uniapp的小程序

问题描述：

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

Web页面中的显示正常：

Uniapp小程序中问题：

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

原因分析：

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

解决方案：

getIntroduce() {const that = thisreturn new Promise((resolve, reject) => {that.$api('getIntroduce').then(res => {that.introduce = res.data// 替换包着img标签的figure标签，改为能被uniapp理解的divthat.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);});})
}

最后效果：