百度小程序之rich-text 富文本踩坑指南,rich-text 富文本渲染图片尺寸样式修改;

<view class="rich-text">
   <!-- 基础库 3.150.1 以前的版本,selectable 属性默认为 false,期望文本不可被选中时不用设置此属性 -->
   <rich-text nodes="{
     
     {post_content}}" image-menu-prevent="true"></rich-text>
   <!-- 基础库 3.150.1 及以后版本,selectable 属性默认为 true,期望文本不可被选中时需设置此属性为 false -->
   <!-- <rich-text selectable="false" nodes="{
    
    {htmlSnip}}"></rich-text> -->
</view>
data: {
    
    
	nid:null,
	post_content: '',
},
onLoad: function(options) {
    
    
        //let winH = swan.getSystemInfoSync().screenHeight;
        this.getnewinfoData();
    },
getnewinfoData() {
    
    
    const params = {
    
    
        area_id: this.data.area_id,
        n_id: this.data.nid
    };
    // console.log(params);
    newinfo(params).then(res => {
    
    
        // console.log(res);
        this.setData({
    
    
            //newslist: res.data.data.news_list,
            //newsinfo: res.data.data.news_info,
            post_content: res.data.data.news_info.post_content.replace(/\<img/gi, '<img style="display:block;max-width:100%;height:auto;margin:0 auto;padding:0"')
        })
    });
},

说明:
后台给的HTML 都是string 类型的 ,前端需要用replace 批量给img 设置一下行内样式,就搞定啦!

this.setData({
    
    
	post_content: res.data.data.news_info.post_content.replace(/\<img/gi, '<img style="display:block;max-width:100%;height:auto;margin:0 auto;padding:0"')
})

猜你喜欢

转载自blog.csdn.net/ws19900201/article/details/108147141
今日推荐