更新记录

0.3.0（2026-08-31） 下载此版本

• 新增自研解析渲染器引擎，默认 engine="parser"，App / Web / 小程序渲染一致：容错 HTML 解析 + 自绘节点树，内置标题 / 列表 / 表格列对齐 / 首行缩进默认排版
• 内置 rich-text 封装保留为 engine="builtin" 兜底；mode / userSelect / space 仅 builtin 引擎生效
• 多媒体（parser 引擎）：<audio> 播放卡（封面 + 播放钮叠放、标题行 title/文件名回退、当前/总时长、拖拽实时跳转，createInnerAudioContext 实现）；<video> 封面卡片（poster 封面 + 播放钮，点击后原生 video 接管，关原生中部大三角防闪现）
• 图片点击自动 uni.previewImage 全屏预览（同一段内容内图片可左右切换）
• itemclick 事件统一形状：detail.type 标记来源 img / a / audio / embed，图片 / 音频卡返回 detail.src、链接返回 detail.href（parser 引擎小程序端也可用）
• 新增 linkColor 链接颜色 prop（parser 引擎生效，默认主题绿 #18a058）
• 鸿蒙蒸汽 CSS 编译器警告消除：音频卡标题单行省略改 :max-lines 属性 + lines 约束 #ifndef APP-HARMONY 收窄、鸿蒙端补定宽裁剪双写（同 nax-text 先例），其它端行为不变
• 同步 readme 与 demo 说明

平台兼容性

uni-app x(4.25)

其他

nax-rich-text

nax-ui 富文本组件（uni-app x / uvue）。

双引擎设计：自研解析渲染器（默认 parser，App / Web / 小程序渲染一致）与内置 rich-text 兜底（builtin）。HTML 字符串 / 节点列表双入口，全局字号 / 颜色 / 行高 / 字体 / 链接色，以及内容点击（图片 / 链接 / 音频卡）事件。

安装

uni_modules/nax-rich-text

依赖：

uni_modules/nax-ui-theme

easycom 自动生效。

推荐同时安装主题包

uni_modules/nax-ui-theme

并在 App.uvue 引入：

@import "@/uni_modules/nax-ui-theme/theme/default.css";

页面根节点加 class="nax-theme"。

主题

通过 CSS 变量覆盖：

富文本内容的颜色以内容内联样式为最高优先级，其次为 color prop 全局色，最后回落到主题 token。

基础用法

<nax-rich-text
  content="<h3>nax-ui</h3><p>支持 <strong>加粗</strong>、<i>斜体</i></p>"
></nax-rich-text>

默认走 parser 引擎：标题 / 列表 / 表格列对齐 / 首行缩进等自带基础排版，全端渲染一致。

节点列表

<nax-rich-text :nodes="nodeList"></nax-rich-text>

const nodeList = [
  {
    name: 'p',
    attrs: { style: 'color: #18a058;' },
    children: [{ text: '节点列表渲染' }]
  }
] as any[]

nodes 非空时优先于 content。

渲染引擎 engine

App 渲染模式 mode（仅 builtin 引擎）

自动回退：传 mode="native" 时，若内容含 h1-h6 / ul / li 等结构标签（native 解析不稳，会出现整块空白），或 iOS / 鸿蒙端开启 user-select，组件自动改用 web 渲染，无需手动处理。

Web / 小程序端忽略该属性（本身就是 webview 渲染）。

多媒体（parser 引擎）

音频

<audio> 渲染为播放卡：封面（poster 属性）+ 播放按钮叠放（播放态光学居中）、标题行（title 属性，缺省回退文件名）、当前 / 总时长、进度条拖拽实时跳转。

<nax-rich-text
  content="<audio src='https://example.com/a.mp3' poster='https://example.com/cover.jpg' title='示例音频' controls></audio>"
></nax-rich-text>

视频

<video> 渲染为封面卡片：封面图（poster 属性）+ 播放按钮，点击后由原生 video 接管播放（App 端原生视频层级最高，无法在其上叠加按钮，故采用“封面卡 → 原生接管”两段式）。

<nax-rich-text
  content="<video src='https://example.com/v.mp4' poster='https://example.com/cover.jpg' controls></video>"
></nax-rich-text>

图片预览

parser 引擎下点击内容图片自动调用 uni.previewImage 全屏预览（同一段内容内的所有图片可左右切换）。

内容点击

<nax-rich-text :content="html" @itemclick="onItemClick"></nax-rich-text>

function onItemClick(e : any) {
  // e.detail.type：img | a | audio | embed
  // 点击图片 / 音频卡：e.detail.src；点击链接：e.detail.href
}

builtin 引擎下小程序端 rich-text 不支持子内容点击，itemclick 不会触发（官方限制）；parser 引擎无此限制。

Props

Events

Slots

平台差异与已知限制

• parser 为默认引擎：自绘节点树，App / Web / 小程序渲染一致；内置 rich-text 限制（如视频不支持）不适用于该引擎
• builtin 引擎小程序端不支持 itemclick 子内容点击（官方限制）
• builtin 引擎 App 端 mode=native 时内容含 h1-h6 / ul / li 等结构标签会自动回退 web 渲染（native 解析不稳）
• 全局样式仅支持 font-size / font-family / line-height / color（写在 rich-text 元素上，优先级低于内容内样式）