更新记录

1.0.0（2026-07-23）

新增 uni-app x .uvue + UTS 标准组件实现。
支持 HTML、Markdown、流式 Markdown、表格、代码高亮、图片和视频。
支持图片懒加载、点击预览、主题色、浅色与暗黑模式。
提供统一 props、事件以及 setContent()、append()、clear() 实例方法。

平台兼容性

uni-app x(3.8.0)

Chrome	Safari	Android	Android插件版本	iOS	iOS插件版本	鸿蒙	微信小程序
-	-	5.0	1.0.0	12	1.0.0	-	-

其他

多语言	暗黑模式	宽屏模式	蒸汽模式
×	√	×	√

kongbai-rich-text

面向 uni-app x 的富文本渲染组件，使用 .uvue + UTS 标准组件模式。

特性

支持 Markdown、HTML、表格、代码块、图片和视频。
原生 image、video 组件渲染独立媒体内容。
支持浅色、深色和跟随系统主题。
支持分段内容更新、图片懒加载和图片预览。
无第三方运行时依赖，内容仅在本地解析和渲染。

安装

将 kongbai-rich-text 放入项目 uni_modules，无需额外安装依赖，即可通过 easycom 使用：

<kongbai-rich-text
  :content="article"
  type="markdown"
  theme-color="#0F766E"
  theme="auto"
  @link-click="onLinkClick"
/>

输入格式

type 支持 markdown、html、auto。auto 会将以 HTML 标签开头的内容识别为 HTML，其余内容按 Markdown 解析。

Markdown 支持标题、段落、粗体、斜体、删除线、链接、图片、引用、有序/无序列表、分隔线、表格、行内代码和围栏代码块。

视频使用扩展语法：

@[video](https://example.com/video.mp4)

HTML 输入可直接使用 <img>、<table>、<pre><code> 和 <video>。视频会从富文本中拆出并交给原生 video 组件播放。

流式输出

父组件可以持续追加响应内容：

<kongbai-rich-text
  :content="answer"
  type="markdown"
  :streaming="receiving"
/>

const answer = ref('')
const receiving = ref(true)

function onMessage(chunk : string) : void {
  answer.value += chunk
}

也可通过组件实例追加内容。组件提供以下方法：

richTextRef.value?.append(chunk)
richTextRef.value?.setContent(markdown)
richTextRef.value?.clear()

非 easycom 自定义组件调用公开方法时，按 uni-app x 规范使用组件实例 $callMethod。

内容绑定

统一使用 content：

<kongbai-rich-text :content="article" />

通过 append、setContent 或 clear 修改内容时，组件统一触发 update:content。

实例方法

方法	参数	说明
`setContent`	`content: string`	替换当前内容。
`append`	`content: string`	追加内容。
`clear`	无	清空内容。

属性

名称	类型	默认值	说明
`content`	`string`	`''`	富文本内容。
`type`	`string`	`auto`	`markdown`、`html` 或 `auto`。
`streaming`	`boolean`	`false`	显示流式输出光标，允许未闭合围栏代码继续渲染。
`themeColor`	`string`	`#2563EB`	链接、引用和流式光标颜色。
`theme`	`string`	`auto`	`light`、`dark` 或 `auto`。
`lazyLoad`	`boolean`	`true`	独立图片使用原生懒加载。
`preview`	`boolean`	`true`	点击图片时调用 `uni.previewImage`。
`selectable`	`boolean`	`true`	富文本是否允许选择。
`showMenuByLongpress`	`boolean`	`false`	独立图片是否显示长按菜单。
`imageMode`	`string`	`widthFix`	独立图片的原生 `mode`。
`videoPoster`	`string`	空	HTML 未提供 poster 时的视频默认封面。
`videoControls`	`boolean`	`true`	显示视频控制栏。
`videoAutoplay`	`boolean`	`false`	视频自动播放。
`videoLoop`	`boolean`	`false`	视频循环播放。

事件

名称	数据	说明
`change`	`{ content }`	实例方法修改内容后触发。
`update:content`	`string`	通过实例方法修改内容时触发。
`item-click`	`{ src, href }`	行内图片或链接点击，未命中的字段为 `null` 或空字符串。
`image-click`	`{ src, index }`	图片点击，预览前触发。
`image-error`	`{ src, detail }`	图片加载失败。
`link-click`	`{ href }`	链接点击；组件不擅自决定站内或外部跳转方式。
`video-play`	`{ src }`	视频开始播放。
`video-error`	`{ src, detail }`	视频播放失败。

安全与平台说明

组件会移除常见危险标签、内联事件和 /code> URL，但它不是完整的 HTML 安全审计器。渲染不可信用户 HTML 时，服务端仍应使用白名单清洗。


独立 Markdown 图片会使用原生 image 的 lazy-load；HTML 内联图片会写入 loading="lazy"，实际加载时机由目标平台的 rich-text 实现决定。
uni-app x 微信小程序当前不提供 rich-text @itemclick，因此该端 HTML 内联图片和链接只保证渲染；独立 Markdown 图片仍支持原生懒加载与预览。
link-click 只上报链接，不自动打开外部应用或网页，避免各端导航策略不一致。
代码高亮为无依赖的轻量词法高亮，适合技术内容展示，不替代完整语法分析器。