uni-app mp-html 富文本组件【全端支持，支持编辑、latex等扩展】 - Jyf 为啥图片点击不能预览

在 uni-app 中使用 mp-html 组件时，如果遇到图片点击不能预览的问题，这通常是由于 mp-html 组件默认并不包含图片预览的功能。为了实现图片点击预览，你需要对图片标签进行自定义处理，比如添加点击事件，然后利用 uni-app 提供的 API 来实现预览功能。

以下是一个基本的实现思路，包含如何在 mp-html 组件中解析 HTML 并添加图片预览功能的代码示例。注意，这里假设你已经熟悉如何在 uni-app 中使用 mp-html 组件，并且你的项目已经配置好了相关的依赖。

1. 自定义 mp-html 组件：

首先，你需要创建一个自定义的 mp-html 组件，该组件将解析传入的 HTML 字符串，并在图片标签上添加点击事件。

<template>
  <view>
    <rich-text :nodes="processedNodes"></rich-text>
  </view>
</template>

<script>
export default {
  props: {
    html: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      processedNodes: []
    };
  },
  mounted() {
    this.processHtml();
  },
  methods: {
    processHtml() {
      const parser = new DOMParser();
      const doc = parser.parseFromString(this.html, 'text/html');
      const images = doc.querySelectorAll('img');
      images.forEach(img => {
        img.setAttribute('data-src', img.getAttribute('src'));
        img.setAttribute('style', 'cursor:pointer;');
        img.setAttribute('onclick', 'previewImage(this)');
      });
      this.processedNodes = this.convertNodes(doc.body);
    },
    convertNodes(element) {
      // 将 DOM 元素转换为 rich-text 可识别的节点格式
      // 这里省略具体实现，需要自行根据需求编写
      // 可以参考 uni-app 官方文档中的 rich-text 节点格式
    },
    previewImage(event) {
      const src = event.target.getAttribute('data-src');
      uni.previewImage({
        urls: [src] // 可以根据需求传入多张图片地址
      });
    }
  }
};
</script>

1. 使用自定义组件：

在你的页面中引入并使用这个自定义的 mp-html 组件。

<template>
  <view>
    <custom-mp-html :html="yourHtmlString"></custom-mp-html>
  </view>
</template>

<script>
import CustomMpHtml from '@/components/CustomMpHtml.vue';

export default {
  components: {
    CustomMpHtml
  },
  data() {
    return {
      yourHtmlString: '<p>Some HTML content with <img src="your-image-url.jpg" /></p>'
    };
  }
};
</script>

请注意，上述代码是一个简化的示例，实际项目中可能需要根据具体需求进行调整，特别是 convertNodes 方法的实现。此外，由于 mp-html 组件和 rich-text 组件的兼容性问题，不同平台（如微信小程序、H5等）可能需要不同的处理方式。