富文本渲染组件

安装路径

uni_modules/zhuanz-richhtml

基础示例

<template>
  <zr-html ref="html" :content="content" @ready="onReady" @linkClick="onLinkClick" @imageClick="onImageClick" />
</template>

<script>
export default {
  data() {
    return {
      content: '<h2>公告标题</h2><p>这里是富文本内容。</p><img src="/static/richhtml-demo.svg" />'
    }
  },
  methods: {
    onReady() {},
    onLinkClick(e) {},
    onImageClick(e) {},
    getPlainText() {
      return this.$refs.html.getText()
    },
    copyPlainText() {
      this.$refs.html.copyText()
    }
  }
}
</script>

Props

Events

Methods

平台兼容性

• uni-app Vue2 / Vue3：支持。
• H5：支持。
• App Vue：支持。
• 微信小程序：支持。
• 支付宝小程序：支持。
• HarmonyOS NEXT App：新增 uni-app Vue3 适配，HBuilderX 5.08+、HarmonyOS 5.0+；构建与真机验证范围见工程内《鸿蒙适配说明.md》。
• 鸿蒙不支持 uni-app Vue2；鸿蒙元服务不在本次适配范围内。
• uni-app x：当前发布目录只有 .vue / JavaScript 实现，本次不声明 uni-app x 鸿蒙支持。

注意事项

• 当前安全过滤为基础正则方案，适合普通内容展示。
• 不建议将其宣传为完整 HTML Sanitizer。
• 表格样式为基础增强，复杂表格仍建议业务侧控制 HTML 结构。
• 图片预览依赖 uni.previewImage，图片地址需要宿主项目可访问。

鸿蒙接入

使用 Vue3 工程，将 uni_modules/zhuanz-richhtml 复制到项目后，通过 HBuilderX 运行到鸿蒙。组件使用官方 rich-text、uni.previewImage 和 uni.setClipboardData，不依赖 plus 或浏览器 DOM。

linkClick、imageClick 保留原始事件；uni-app 的节点属性从 e.detail.node.attrs 读取。链接由宿主业务处理，不会自动打开外部页面。图片请优先使用可访问的 HTTPS PNG/JPEG 地址。图片预览失败会触发 error，携带原始错误 detail。

参考：鸿蒙开发、rich-text。