更新记录

1.0.1（2026-01-13） 下载此版本

优化：支持解析markdown

1.0.0（2026-01-13） 下载此版本

解析后台发布的富文本内容。

平台兼容性

uni-app(4.81)

uni-app x(4.81)

jx-mhtml 富文本解析插件

插件介绍

这是一个支持Vue2和Vue3的uni-app富文本解析插件，可以从content内容中提取HTML代码，包括p标签、img标签等。

功能特点

• 支持Vue2和Vue3
• 自动识别Vue版本并使用相应组件
• 支持常见的HTML标签（p、img等）
• 支持Markdown语法解析
• 自动过滤危险内容，提高安全性
• 跨平台支持（H5、App、小程序）

安装方法

将此插件放入uni_modules目录即可自动集成。

使用方法

在页面中使用

<template>
  <view>
    <!-- 自动检测内容格式（HTML或Markdown） -->
    <jx-mhtml :content="htmlContent" @parsed="onParsed" />
    <jx-mhtml :content="markdownContent" @parsed="onParsed" />

    <!-- 强制使用HTML模式 -->
    <jx-mhtml :content="content" :autoDetect="false" @parsed="onParsed" />
  </view>
</template>

<script>
import JxMHtml from '@/uni_modules/jx-mhtml/components/jx-mhtml/jx-mhtml.vue';

export default {
  components: {
    JxMHtml
  },
  data() {
    return {
      htmlContent: '<p>这是一段富文本内容</p><img src="https://example.com/image.jpg" alt="示例图片"><p>包含图片和段落</p>',
      markdownContent: '# 标题\n\n这是一段**粗体**和*斜体*的文本。\n\n- 列表项1\n- 列表项2\n\n[链接](https://example.com) ![图片](https://example.com/image.jpg)'    }
  },
  methods: {
    onParsed(parsedContent) {
      console.log('解析后的内容：', parsedContent);
    }
  }
}
</script>

属性说明

事件说明

方法说明

注意事项

1. 为了安全起见，插件会自动过滤script标签和on*事件处理器
2. 在Web环境下，Vue3版本直接使用v-html渲染，在非Web环境下使用rich-text组件
3. 图片标签会自动添加max-width: 100%样式以适配容器

版本兼容性

• HBuilderX 3.1.0+
• 支持Vue2和Vue3
• 支持H5、App、小程序平台