关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

微信小程序rich-text富文本图片img及文字样式控制

发布2021-04-01 浏览2480次

详情内容

微信小程序rich-text富文本图片img及文字样式控制,在看了官方文档怎么试了都没有效果,因为富文本出来的标签是带行内样式的不是纯的html标签,所以得想办法去掉富文件里的行内样式,只能用正则字符删除替换。

wxml文件代码:

<rich-text nodes="{{line_details}}"></rich-text>

.js文件代码:

Page({
    data: {
        line_details:''
    }
    ....
    ...
    getcontent:function(){
    //在这里api获取到内容后
        //ayumi
      let html_result = '';
      let line_html = data.data.extend_info.e_content_2;
      if(line_html)
      {
        html_result = line_html
            .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
            // .replace(/<p>/ig, '<p style="text-align:left;">')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(max-height="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(max-width="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(data-ratio="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(data-op="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(\/)))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 style="max-width:100%;height:auto"');
      }

      this.setData({
        "line_details": html_result
      });
    }
})

值得注意的是有时出来图片标签是:

<img src="xxx.jpg" alt="xx" data-op="ff" data-ratio="0.666"> 或<img src="xxx.jpg" alt="xx" data-op="ff" data-ratio="0.666"/>

效果如下:

image.png

点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载