hugh 的个人博客

将ueditor编辑的内容转换成h5展示

1. img 调整宽度及高度,editor的图片高度和宽度会设置成具体的值, 我们需要根据实际情况将px转换成rem, 或者去掉宽高,使用css控制

imgTrans(entry) {
    // 正则找出所有的img
    if(entry) {
      var imgs = entry.match(/<img.*?(?:>|\/>)/gi)
      if(imgs) {
        imgs.forEach(img => {
          var reImg = img.replace(/width=[\'\"]?([^\'\"]*)[\'\"]?/i, "width='100%'").replace(/height=[\'\"]?([^\'\"]*)[\'\"]?/i, "")
          entry = entry.replace(img, reImg)
        })
      }
      return entry
    }
return entry

}

2. px to rem

  pxToRem(entry) {
    var reg = /(\:|: | )+(\d)+(px)/gi;
    let newStr = entry.replace(reg, function(_x){
      var _xs = _x;
      _x = _x.replace(/(\:|: )/,'').replace(/px/i,'');
      return `${ _xs.indexOf(':') >= 0 ? ':' : ' ' }${ pxTransform(_x) }`;
    });
    return newStr;
  }

标题:将ueditor编辑的内容转换成h5展示
作者:hugh0524
地址:https://blog.uproject.cn/articles/2019/06/26/1561513445058.html