评论

rich-text 自适应图片大小操作。

解决 rich-text 图片自适应问题

说一下项目过程:后端返回的数据里面包含了 html 标签,据说是富文本粘贴过来的文字和图片,拿到手的肯定的都会带有粘的样式在标签上,这样的简单点的操作就使用小程序自带的 rich-text 组件即可,但是发现文字是有了,图片却显示的非常大,而且标签上自带 style 和 width 参数,这样的话就很难直接填充了。

解决问题:

首先想到的是用插件,找了一款 wxParse 转换插件,但是发现非常的大,而且很多不必要的操作,我就直接替换一下图片而已,放弃。第二个插件 Parser 虽然体积小,但是也不是我选择的对象,最后想到了如果能在图片的样式替换一下自己想要的样式那就可以了,话不多说,直接看代码。

新建 wxs 文件,需要的图片有很多,所以这里直接使用 wxs 文件写入的方法操作

  1. 先把所有的单引号转换为双引号,
  2. 找到 img 标签,
  3. 然后在 img 标签里找到 style 样式属性,替换原有的属性。

这样的操作下来发现图片就可以正常显示大小而且能自适应了,这里暂没做点击图片的处理,小程序 rich-text 自动屏蔽点击操作,如果有好的方法,请留言,学习学习,感激。

 function replaceImg(content{
  content = content.replace(getRegExp('"''g'), '"');
  content = content.replace(getRegExp(']*>''gi'), function(match{
        // 判断没有 style 样式
    if(match.indexOf('style') === -1) {
      var index = match.indexOf('src');
      var reg = getRegExp('(.{' + index + '})');
      return match.replace(reg, '$1 style="max-width:100%;height:auto;display: block;" ')
    }
    return match.replace(getRegExp('style\s*?=\s*?([‘"])[\s\S]*?\1''gi'), 'style="max-width:100%;height:auto;display: block;"')
  });
  return content;
}

module.exports.replaceImg= replaceImg;
最后一次编辑于  2020-04-27  
点赞 3
收藏
评论

2 个评论

  • 唏嘘
    唏嘘
    2020-04-16

    这个我碰到了 并且是这样写的

    var formatLaber = function (text{
        //替换富文本  标签
        if (!text) {
            return;
        }
        var reg = getRegExp('<img''gi')
        return text.replace(reg, '<img style="max-width:100% !important;height:auto !important;margin-top:10px;"')
    }
    

    --↓↓👍点赞是回答的动力哦

    2020-04-16
    赞同 4
    回复
  • 唏嘘
    唏嘘
    2020-04-16

    点击不能只能从头开始点击 并不能实时点击显示 进来时候 循环遍历图片 点击  rich-text  组件触发事件就行

    2020-04-16
    赞同
    回复
登录 后发表内容