微信小程序图片编辑怎么划重点 (微信小程序富文本图片样式重置)

使用rich-text展示富文本内容时,其中的图片过大,超出屏幕,我们可以使用replace给他添加额外样式,来控制图片大小

Content为后台获取的富文本返回数据;

let newContext = context.replace(/<img/g, '<img class="richImg"');

微信小程序开发图片尺寸怎么设置,微信小程序富文本图片样式重置

这个时候直接设置richImg样式就行

.richImg{
  max-width: 94% !important;
  height: auto !important;
  vertical-align: middle;
}

微信小程序开发图片尺寸怎么设置,微信小程序富文本图片样式重置

同理可以设置p标签和span标签

content = content.replace(/"/g,'"');
content = content.replace(/&/g, '&');
content = content.replace(/</g, '<');
content = content.replace(/>/g, '>');
content = content.replace(/ /g, ' ');
content = content.replace(/<p/gi, '<p class="p_class" ');
content = content.replace(/<span/gi, '<span class="span_class" ');