HTLF

一步一个脚印,走出高度...

导航

微信小程序富文本内容样式修改

一、使用js操作

1、方式,在获取api返的数据时操作

  // 获取文章
  getArtic(){
    wx.request({
      url: `${app.data.getUrl}/api/News/GetFormJson`,
      method:"GET",
      data:{
        Id: this.data.query.Id
      },
      success: ({data:res})=>{
        // 添加样式
        var _content = (res.Data.NewsContent).replaceAll('<img','<img style="float: left;width:100%";display: inline-block;height: auto;')

        if(_content.indexOf('<p><img')){
          _content=_content.replaceAll('<p id="feb-content" style="margin-left:2em"><img','<p id="feb-content"  style="font-size:0;"><img')
        }
        res.Data.NewsContent= _content
        // 设置返回数据
        this.setData({ 
          articleContent: res.Data
        })
      }
    })
  },

css样式操作

  1. text为Class类名,添加相关属性样式
.text [alt] {
  width: 100%;
  margin-left: -2em;
}
.text [style] {
  display: table;
  text-align: justify;
  word-break: break-word;
  word-break: break-all;
  width: 100%;
  padding-top: 1em;
  text-indent: 2em;
  font-size: 0;
  line-height: 36rpx;
}

posted on 2025-01-03 10:44  HTLF  阅读(11)  评论(0编辑  收藏  举报