更新记录

1.0.0（2026-11-12） 下载此版本

首次发布。

功能

• 本地解析 HTML / Markdown（不使用 WebView），渲染为原生组件
• 块级元素：段落、六级标题、有序/无序/嵌套列表、引用、代码块、表格、图片、视频、分割线
• HTML 常用内联样式子集：颜色、背景色、字号、加粗、斜体、下划线/删除线、对齐、行内代码
• 表格：表头自动识别（兼容 <th> 与 <thead> 包裹 <td>）、单元格背景色铺满整格；列宽两种模式可选：等分 / 按各列最长文本占比自适应
• 列表：左侧主题色引导线，<li> 内嵌套块级标签自动归并，组内紧凑、组间正常段距
• 空段落处理：<p><br></p> 转受控空行，连续空段落自动折叠
• 图片：懒加载 + 点击全屏预览（自动收集全文图片），1px 占位图 / spacer.gif 自动过滤
• 主题系统：5 套预设（default / compact / article / dark / darkblue）+ customStyle 浅合并覆盖
• 深色主题自动忽略内容自带背景色
• 表头渲染开关 prop（tableHeader）
• 解析器独立导出（parseRichText），可自行接管渲染层

平台

• Android（minSdk 21）/ iOS / 鸿蒙 HarmonyOS
• 纯 UTS + uvue 实现，无原生混编代码，三端共用同一份解析与渲染逻辑

平台兼容性

uni-app x(3.8.10)

其他

djiz-rich-text

uni-app x 富文本渲染组件插件。在本地解析 HTML / Markdown（不使用 WebView），渲染为原生组件：文本、标题、列表、引用、代码块、表格、图片、视频、分割线。

平台支持

编译工具要求 HBuilderX 4.61+。纯 UTS + uvue 实现，无原生混编代码，最低系统版本跟随 uni-app x 官方平台要求：Android 5.0（API 21）、iOS 12、HarmonyOS NEXT（API 12）。

特性

• 本地解析：手写 HTML tokenizer + Markdown 行扫描，解析与渲染分离，产出扁平块模型，无递归组件
• 丰富块级元素：段落、六级标题、有序/无序/嵌套列表、引用、代码块、表格、图片、视频、分割线
• HTML 常用内联样式子集：color、background-color、font-size、font-weight、font-style、text-decoration、text-align、行内 code
• 表格：表头自动识别（兼容 <th> 与 <thead> 包裹 <td> 两种写法）、单元格自带背景色铺满整格、flex 均分列
• 列表：左侧主题色引导线，<li> 内嵌套 <p>/<div> 自动归并、不丢序号，组内紧凑、组间正常段距
• 空段落智能处理：<p><br></p> 转为受控空行，连续空段落自动折叠，避免段距叠加
• 图片：懒加载 + 点击全屏预览（自动收集全文图片、按顺序定位），1px 占位图 / spacer.gif 自动过滤
• 主题系统：5 套内置预设（default / compact / article / dark / darkblue）+ customStyle 浅合并覆盖任意字段
• 深色主题自动忽略内容自带背景色，避免白字压浅灰底
• 解析器独立导出，可自行接管渲染层

使用方式

easycom 自动引入，无需手动 import：

<djiz-rich-text :content="html" type="auto" />

<!-- 指定主题 -->
<djiz-rich-text :content="md" type="markdown" theme="article" />

<!-- 覆盖个别样式字段 -->
<djiz-rich-text
  :content="html"
  theme="dark"
  :custom-style="{ linkColor: '#7CC7FF', paragraphSpacing: 12 }"
/>

// 服务端获取内容后直接传入，type='auto' 自动识别 HTML / Markdown
const content = ref<string>('')
uni.request({
  url: 'https://example.com/api/article/1',
  success: (res) => {
    content.value = (res.data as UTSJSONObject)['html'] as string
  }
})

Props

Events

样式覆盖（customStyle）

customStyle 传普通对象，字段缺省时回退到所选 theme 预设的默认值。优先级：HTML 内联样式 > customStyle > theme 预设 > 内置默认。

示例：article 预设基础上微调

const custom = {
  headingColor: '#0F766E',
  tableBorderColor: '#99D5CF',
  tableHeaderBackground: '#E6F4F1',
  paragraphSpacing: 12
} as UTSJSONObject

<djiz-rich-text :content="html" theme="article" :custom-style="custom" />

解析能力说明

HTML 支持的标签：h1~h6、p、div、span、strong/b、em/i、u、s/del、code、pre、a、blockquote、ul/ol/li、table/thead/tbody/tr/th/td、img、video、br、hr

HTML 内联样式子集：color、background-color、font-size、font-weight、font-style、text-decoration、text-align

Markdown 支持：标题、加粗/斜体/删除线、行内代码、代码块、链接、图片、引用、有序/无序列表、GFM 表格、分割线，及扩展视频语法 @[video](url)

特殊处理：

• <p><br></p> 空段落 → 固定高度空行，连续多个自动折叠为一个
• <li> 内嵌套 <p>/<div> 内容自动并入当前列表项
• 宽度/高度为 1 的图片及 spacer.gif 占位图自动丢弃
• 单元格 background 样式提升到单元格容器层，背景铺满整格而非仅文字

进阶：自行接管渲染

解析器独立导出，可跳过组件、自行渲染块模型：

import { parseRichText, RichTextBlock } from '@/uni_modules/djiz-rich-text'

const blocks: RichTextBlock[] = parseRichText(html, 'auto')

目录结构

djiz-rich-text/
├── components/djiz-rich-text/djiz-rich-text.uvue  # 跨端渲染组件
├── utssdk/
│   ├── index.uts            # 解析入口：parseRichText / detectContentType
│   ├── model.uts            # 块模型 + 主题样式系统（5 套预设 + 合并逻辑）
│   ├── htmlParser.uts       # HTML 手写 tokenizer 解析器
│   └── markdownParser.uts   # Markdown 解析器
└── package.json

完整演示见项目页面：pages/rich-text-demo/demo.uvue（本地示例）、pages/rich-text-api-demo/api.uvue（远程接口实测）。