更新记录

1.0.1（2026-09-10） 下载此版本

• 新增图片点击预览，自动收集富文本中全部图片并定位到当前图片
• 新增链接点击打开，H5 新窗口打开，App 使用内置浏览器打开
• 新增 previewImage、openLink 属性，可分别关闭图片预览和打开链接
• 支付宝小程序通过 marks 识别 img、a 节点，支持点击预览图片

1.0.0（2026-09-09） 下载此版本

首次提交。 当前版本未处理点击事件，后续会增加事件处理

平台兼容性

uni-app(3.8.3)

uni-app x(3.8.3)

# oz-richText

描述

富文本展示组件。内部会将 HTML 字符串或节点数组转换为 uni-app rich-text 可用的 nodes，并为非文本节点补充样式 class。

插件符合 uni_modules 规范，导入后可通过 easycom 直接使用。

属性

uni-app 中，自定义组件内的 rich-text 只会应用当前组件的 css，页面或外部样式无法覆盖内部节点。

事件

图片预览

点击图片时，会先收集富文本中的全部图片地址，再打开图片集并定位到当前图片。

• 由 previewImage 控制，默认开启
• H5、App-vue 通过 @itemclick 识别 img
• 支付宝小程序通过 @click 的 event.detail.marks 识别 img

uni.previewImage({
    current: 0, // 当前点击图片在图片集中的下标
    urls: ['图片地址1', '图片地址2']
});

打开链接

点击 a 标签时，由 openLink 控制是否打开链接，默认开启。

• H5：window.open(href, '_blank')
• App：plus.runtime.openWeb(href)

示例

<oz-richText :content="html"></oz-richText>

export default {
    data() {
        return {
            html: '<p>你好</p><img src="https://example.com/a.png" /><a href="https://uniapp.dcloud.net.cn/">链接</a>'
        };
    }
};

关闭图片预览或打开链接：

<oz-richText :content="html" :previewImage="false" :openLink="false"></oz-richText>

直接使用组件时无法自定义样式，只能按照组件内部的默认样式和标签内联样式展示。

自定义样式

若要自定义样式，需要使用组件内的 formatRichText 配合原生 rich-text 标签渲染。需要默认样式时，可引入组件内的 default.scss。

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

<script>
    import { formatRichText } from '@/uni_modules/oz-richText/components/oz-richText/format-rich-text.js';

    export default {
        data() {
            return {
                nodes: []
            };
        },
        onLoad() {
            this.nodes = formatRichText(this.html, {
                prefix: 'custom'
            });
        }
    };
</script>

<style>
    @import '@/uni_modules/oz-richText/components/oz-richText/default.scss';

    /* 自定义前缀对应的样式 */
    .custom-p {
        font-size: 30rpx;
    }
</style>

rich-text 内部节点吃不到 scoped 样式，自定义 class 需要写在未加 scoped 的 style 中。

工具方法

formatRichText(nodes, options)

import { formatRichText, parseHtml } from '@/uni_modules/oz-richText/components/oz-richText/format-rich-text.js';

const nodes = formatRichText(html, {
    prefix: 'custom',
    tagStyle: {
        p: 'font-size:16px;line-height:1.6;',
        td: 'border:1px solid #000;padding:8px;'
    }
});

options：

返回处理后的 nodes 数组。

处理规则：

• 传入数组时直接处理；传入 HTML 字符串时先调用 parseHtml
• 跳过文本节点；元素节点默认都会追加 rich-${标签名}
• 传入的 prefix 与默认前缀 rich 不同时，再追加 ${prefix}-${标签名}；相同时不重复添加
• 已有 class 会保留，已存在的 class 不会重复写入
• 遇到 table 时外包一层 div，class 规则同上，默认是 rich-table-container
• 匹配到 tagStyle 的标签会写入对应内联样式，该配置会与默认值合并，可用于任意标签
• 支付宝小程序下，a、img 会写入 marks，可在 tap / longTap 的 event.detail.marks 中读取

支付宝小程序 marks：

示例：

• <p class="intro">你好</p> → intro rich-p
• formatRichText(html, { prefix: 'custom' }) 时，p → rich-p custom-p
• formatRichText(html, { prefix: 'rich' }) 时，p 只有 rich-p
• 传入 custom 时，表格容器 class 为 rich-table-container custom-table-container

parseHtml(html)

将 HTML 字符串解析为 rich-text 节点数组。formatRichText 内部会按需调用，一般无需单独使用。