Taro小程序开发随记

是陈哈哈噢2024-12-04 10:18

处理taro小程序显示wangeditor内的a标签跳转

javascript 复制代码

Taro.options.html.transformElement = (el) => {
  if (el.props.class === 'h5-a') {
    el.__handlers.tap = [() => toWebView(el.props.href)]
  }
  return el
}

处理wangeditor富文本内容中图片视频到小程序中展示问题

html 复制代码

<view class="rich-content" v-html="replaceImg(code)" />

javascript 复制代码

function replaceImg(code: string) {
  return code.replace(/poster="[^"]*"/i, '').replace(/width="[^"]*"/i, 'width="100%"').replace(/height="[^"]*"/i, '').replace(/><source/, '').replace(/type="video\/mp4\/>./, '').replace(/<img/gi, '<img mode="widthFix" ')
}

如果富文本中图片与图片直接有白缝，需要把图片元素变成块元素或者给图片一个负的margin-top挤一下，即可解决

css 复制代码

img {
  display : block ; 
  width: 100%;
  margin-top: -11px;
}