收藏
回答

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

我想用 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%;
}

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

回答关注问题邀请回答
收藏

2 个回答

  • 王小飞
    王小飞
    2018-09-06

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

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



    2018-09-06
    有用 2
    回复 3
    • 猿
      2018-09-20

      html = html.replace(/<img/g, '<img style="width:100%" ');

      改成这样我的可以用了

      2018-09-20
      1
      回复
    • The-fighter-
      The-fighter-
      2019-09-18
      为啥我的不行呢,图片还是还是那么大
      2019-09-18
      回复
    • 哄哄
      哄哄
      2020-05-14回复The-fighter-
      content.replace(/<img/g, '<img style="width:100%"')  这样可以
      2020-05-14
      回复
  • 2018-06-16

    文档不是写了咩

    // 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')
      }
    })


    2018-06-16
    有用
    回复 2
    • 李小凯:9090
      李小凯:9090
      2018-06-16

      是必须把字符串转成 nodes 数组才可以吗?有没有库可以直接转呢?因为后端返回了 html 字符串

      2018-06-16
      回复
    • 2018-06-16回复李小凯:9090

      插件wxParse可以转换

      2018-06-16
      回复
登录 后发表内容