公告列表
公告列表
收藏
回答

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
      赞
      回复
请 登录 后发表内容
相关问题
相关文档