样式失效不显示"/>
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等标签,
导致字体颜色、间距、图片全都失效
解决方案:
最后用的解决方法是用replace替换掉富文本字符串里的标签样式。 替换成uniapp能够理解的标签: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);});})
}
最后效果:
更多推荐
uniapp小程序wangEditor富文本图片、样式失效不显示
发布评论