Guía de errores de texto enriquecido de texto enriquecido del subprograma Baidu, modificación de estilo y tamaño de imagen de representación de texto enriquecido de texto enriquecido;

<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"')
        })
    });
},

Nota:
El HTML proporcionado en segundo plano es todo de tipo cadena. La interfaz necesita usar reemplazar para configurar por lotes los estilos en línea para img, ¡y listo!

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

Supongo que te gusta

Origin blog.csdn.net/ws19900201/article/details/108147141
Recomendado
Clasificación