首页 » 工作 » 方法 » 正文

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

发布者:站点默认
2015/10/10 浏览数(23) 分类:方法 微信小程序 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;
}
点击返回顶部
  1. 留言
  2. 联系方式