富文本渲染组件

安装路径

uni_modules/zhuanz-richhtml

基础示例

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

<script>
export default {
  data() {
    return {
      content: '<h2>公告标题</h2><p>这里是富文本内容。</p>'
    }
  },
  methods: {
    onReady() {},
    onLinkClick(e) {},
    getPlainText() {
      return this.$refs.html.getText()
    }
  }
}
</script>

Props

Events

Methods

平台兼容性

• uni-app Vue2 / Vue3：支持。
• H5：支持。
• App Vue：支持。
• 微信小程序：支持。
• 支付宝小程序：支持。
• uni-app x：支持 Web 和 App，需按实际项目运行环境验证。

注意事项

• 当前安全过滤为基础正则方案，适合普通内容展示。
• 不建议将其宣传为完整 HTML Sanitizer。
• 对复杂表格、代码块、图片预览等重内容场景，建议后续版本扩展。