更新记录

1.1.0（2026-10-15）

• 代码块（pre）默认改为横向滚动：保持原始行与缩进，超出宽度时左右滑动，不再被硬折断
• 新增 wrapCode 属性（默认 false）：设为 true 时代码块超出宽度自动换行；行内 code 始终随文本换行
• <pre> 内的 <code> 不再叠加行内代码的底色 / 内边距 / 圆角，统一由代码块样式呈现
• 示例页面新增长代码行与「代码块自动换行」开关，便于对比效果

平台兼容性

uni-app(5.0)

其他

hy-rich-text HTML 富文本显示器

hy-rich-text 是一个 uni-app（Vue2 / Vue3） 的只读 HTML 富文本渲染组件（显示器），解析引擎为自研轻量实现，无任何第三方依赖。

支持 H5 / PC、App（Android / iOS / HarmonyOS）以及微信等主流小程序、快应用。 组件把 HTML 解析成视图就绪的块树，全平台统一渲染为 view / text / image，不使用 rich-text / v-html，保证各端表现一致。 另提供 uni-app x 版本：hy-rich-text-x。

功能特性

• 纯只读渲染，不含编辑能力，无第三方依赖
• 支持常用 HTML 标签：div / p / h1~h6 / blockquote / pre / code / ul / ol / li / dl / dt / dd / table / thead / tbody / tfoot / tr / th / td / hr / img / a / br 以及行内语义标签 span / strong / b / em / i / u / s / del / ins / mark / small / big / sub / sup / kbd / samp / var / cite / q / abbr / time / font 等
• 支持原生 HTML 实体：命名实体（& /   / © / — …）与数字实体（{ / 😀）
• 支持 style="..." 行内样式
• 支持 <style> 简单选择器：标签 / .class / #id / 后代（空格）/ 子代（>）/ 逗号分组 / 通配 *
• 支持 CSS 简写展开（margin / padding / border / border-radius / background / font）与单位换算（px / rpx / em / rem / pt / %）
• 支持深色主题与文本可选择（selectable）开关
• 支持一键复制按钮（copyable）：开启后组件右上角显示「复制」按钮，点击派发 copy 事件并回传纯文本，复制动作由使用者在回调中自行实现
• 支持图片点击派发 image 事件，并可选自动 uni.previewImage
• 支持通过 tagStyle / extraCss 注入自定义样式

安装

将 hy-rich-text 目录放入项目的 uni_modules 目录即可，组件已支持 easycom，无需手动 import。

基本用法

<template>
    <view style="padding: 30rpx;">
        <hy-rich-text
            :content="html"
            :dark="false"
            :selectable="true"
            :copyable="true"
            @link="onLink"
            @image="onImage"
            @copy="onCopy"
        />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                html: '<h2>HTML 富文本</h2><p>支持 <strong>粗体</strong>、<em>斜体</em>、<span style="color:#e91e63">彩色文字</span> 与 <a href="https://dcloud.io">链接</a>。</p>'
            }
        },
        methods: {
            onLink(href) {
                uni.showToast({ title: '链接：' + href, icon: 'none' })
            },
            onImage(src) {
                // previewImage 为 true 时组件已自动预览
            },
            onCopy(text) {
                uni.setClipboardData({
                    data: text,
                    success: () => {
                        uni.showToast({ title: '已复制', icon: 'none' })
                    }
                })
            }
        }
    }
</script>

完整可运行示例见插件内 example/example.vue（若要运行，请将其路径加入项目 pages.json 的 pages 数组）。

属性 Props

事件 Events

也可通过组件方法 this.$refs.rt.getText() 获取当前渲染内容的纯文本。

支持的语法

HTML 标签

不渲染的标签：script style（内容仅用于 CSS）head title meta link base noscript template iframe canvas svg。

CSS 样式

• 来源与优先级（由低到高）：标签内置默认样式 → <style> / extraCss 规则 → tagStyle → 行内 style
• 选择器：标签、.class、#id、后代（空格）、子代（>）、逗号分组、通配 *
• 属性：color background(-color) font-size font-weight font-style font-family text-decoration(-line) text-align line-height letter-spacing text-indent margin(-*) padding(-*) border(-*) border-radius width height max-width min-height display white-space word-break opacity text-transform vertical-align list-style-type 等
• 简写展开：margin / padding / border / border-radius / background / font
• 单位换算：px / rpx / em（依父字号）/ rem（依 baseFontSize）/ pt / %
• 安全过滤：url() / expression / /code> / @import / < > 一律忽略