在开发时,要用到将富文本编辑器中的内容渲染到页面,涉及图片样式的修改,尝试了直接更改样式,发现并没有效果,这是因为原有富文本编辑器中的图片原有样式级别更高,后面加的样式不能够覆盖原有的样式,需要先将元素原有样式清除,再重新增加新的样式,整理如下:
<!-- index.wxml -->
<view class="detailBox">
<rich-text class="detailContent" nodes='{{htmlSnip}}'></rich-text>
</view>
/* index.js */
Page({
data:{
htmlSnip:''
},
clickDetail(e){
var item = e.currentTarget.dataset.item;
const htmlSnip = item.prizeDescription;
//先清除原有样式
let newhtml = htmlSnip.replace(/<img[^>]*>/gi, function (match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
return match;
});
//再设置新的样式
newhtml = newhtml.replace(/\<img/gi, '<img style="max-width:60%;height:auto;text-align:center;"');
this.setData({
htmlSnip: newhtml
})
}
})
同样,其他标签的也可通过以上方式修改样式,小伙伴们可以尝试一下
关于rich-text组件的用法可查看官方文档:rich-text官方文档
关于replace的用法可参考:replace的用法总结