微信小程序图片与文字的排版 (微信小程序富文本编辑器怎么用)

使用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" ');