微信小程序 rich-text 添加样式

如果需要修改 rich-text 的样式，可以给 HTML 里的标签加上 class ，用 class 控制，示例如下：

app.js

addClassName2HTMLTags: function (html) {
  var text = html.replace(/class=".*?"/g, ''); // 删除现有 class （内容可能粘自浏览器中的网页）
  text = text.replace(/<([a-z]+)(\s?)(.*?)>/gm, '<$1 class="$1"$2$3>'); // 添加与标签同名的 class
  return text;
},

detail.js

const app = getApp()
Page({
  data: {
    article: {
      body: '',
    }
  },
  addClassName2HTML: function (html) {
    return app.addClassName2HTML(html);
  },
  onLoad: function (options = {}) {
    let self = this;
    self.setData({
      ['article.body']: self.addClassName2HTML('<p>p</p><img /><span>span</span>'),
    });
  },
});

detail.wxml

<rich-text nodes="{{article.body}}"></rich-text>

detail.wxss

.img {
  max-width: 80%;
  border-radius: 8rpx;
  height: auto !important;
}
.p {
  text-indent: 2em;
  margin: 1em 0;
  text-align: justify;
}
.span {
  display: inline-block;
}