uniapp编译微信小程序富文本rich-text的图片样式不生效原因

cb11012023-10-27 12:41

javascript 复制代码

				this.detail.contents = this.detail.contents.replace(/\<img/gi, '<img style="display:block;max-width:90%;height:auto;border:2px solid #eee;box-shadow:5px 5px 5px rgba(100,100,100,0.8);margin-bottom:10px;text-align:center;" ');

开始采用这个replace方法，编译后h5中生效，微信小程序中不生效

详细查看代码，是因为在后台增加文章的时候，富文本编辑器自动给图片设置了宽度，导致在小程序中的替换虽然成功了，但是不生效

修改思路：先把rich-text中的style属性替换掉，然后再替换想要的样式，也就是通过两次replace实现，代码如下

javascript 复制代码

this.detail.contents = this.detail.contents
//这里把img里面的style替换成空
.replace(/(style="(.*?)")|(width="(.*?)")|(height="(.*?)")/ig, '')
.replace(/\<img/gi, '<img style="display:block;max-width:90%;height:auto;border:2px solid #eee;box-shadow:5px 5px 5px rgba(100,100,100,0.8);margin-bottom:10px;text-align:center;" ');

好了，预览小程序，生效了，仅供参考