traffic-eff-app/pages/detail/index.vue

<template>
  <view class="content-info-container">
    <view class="title-container">
      <view class="title-content-text">{{ title }}</view>
      <view class="title-content-date">{{ date }}</view>
    </view>
    <mp-html :content="content|formatRichText" selectable="true" show-img-menu="true" />
  </view>
</template>

<script>
import { fetchContentDetail } from '@/common/api';

export default {
  name: 'content',
  props: {},
  data() {
    return {
      content: '',
      queryParams: {},
      title: '',
      date: '',
    };
  },
  created() {
  },
  onLoad(res) {
    console.log(res);
    this.queryParams = res;
    this.getContentInfo();
  },
  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/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: {
    async getContentInfo() {
      const {
        data: {
          content,
          title,
          createTime,
        },
      } = await fetchContentDetail(this.queryParams.id);
      this.content = content;
      this.title = title;
      this.date = uni.$u.timeFormat(createTime, 'yyyy-mm-dd');
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />;