rich-text 组件如何控制富文本内容的样式 - WXOPEN Club

我想用 rich-text 来显示一段 html 内容，使用字符串的方式

<rich-text nodes="{{description}}" class="d-rich"></rich-text>

description 的值为 <p><img src=“http://shop.uclee.com/file/jpg/20180603/file1528004999989527.jpg”></p>

图片可以显示出来，但是宽度超出了屏幕，是否有办法控制 img 标签的样式，

.d-rich img {

width:100%;

}

试过这样写，但是没有效果。

pingkang 1楼•5 年前

亲测，可以使用正则往html节点上加style，然后在绑定到rich-text上。

eg: 想要rich-text里面图片宽度自适应，可以这样var html = ‘<p><img src=“xxx”’ /></p>;html = html.replace(/<img/g, ‘<img style=“width:100%”/>’);

qiufang 2楼•4 年前

文档不是写了咩

// rich-text.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})