traffic-eff-app/components/RichText/index.vue

<template>
  <mp-html :content="content|formatRichText" selectable="true" show-img-menu="true" ref="mpHtml" />
</template>

<script>
export default {
  name: 'rich-text',
  props: {
    content: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },
  created() {
  },
  filters: {
    /**
     * 处理富文本里的图片宽度自适应
     * 1.去掉img标签里的style、width、height属性
     * 2.img标签添加style属性：max-width:100%;height:auto
     * 3.修改所有style里的width属性为max-width:100%
     * 4.去掉<br/>标签
     * @param html
     * @returns {void|string|*}
     *
     */
    formatRichText(html) { //控制小程序中图片大小
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
        return match;
      });
      newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
            'max-width:100%;');
        return match;
      });
      newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      newContent = newContent.replace(/<img src="\/dev-api|<img src="\/prod-api/gi,
          `<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="${process.env.UNI_FILE_PREFIX}`);

      newContent = newContent.replace(/<iframe(([\s\S])*?)<\/iframe>/ig, function (match, capture) {
        match = match.replace('iframe', 'video');
        match = match.replace(/<video/gi,
            '<video style="width:100%;height:auto;display:inline-block;margin:10rpx auto;"')
            .replace(/style='[^']+'/gi, 'style=\'max-width:100%;height:auto;display:inline-block;margin:10rpx auto;\'');
        match = match.replace(/src="/gi, `src="${process.env.UNI_FILE_PREFIX}`)
            .replace(/src='/gi, `src='${process.env.UNI_FILE_PREFIX}`);
        return match;
      });
      return newContent;
    },
  },
  methods: {
  },
};
</script>
<style lang="scss" src="./index.scss" />;