更新记录

1.0.0（2026-07-22）

• 全新发布：全平台 HTML / Markdown 富文本解释器
• Vue3 <script setup>；默认 XSS、主题、内置 Markdown
• 插件：Style / Search / Emoji / Highlight / Audio / Latex / TxvVideo / ImgCache / Editable
• 支持 uni-app x（.uvue + UTS）；演示页功能矩阵
• 功能清单：FEATURES.md

平台兼容性

uni-app(3.8.0)

uni-app x(3.8.0)

其他

kex-rich-text

全新全平台富文本解释器（uni-app Vue3 / <script setup>）。
支持 HTML / Markdown 渲染、XSS 净化、主题、插件扩展、编辑模式，以及 uni-app x。

支持：H5 / App（vue 页）/ 微信等小程序 / 鸿蒙 / nvue（webview）/ uni-app x。

完整能力勾选见：FEATURES.md

目录

1. 功能一览
2. 安装
3. 快速上手
4. 进阶用法
5. Props
6. Events
7. 方法 ref
8. 插件
9. 多端说明
10. 常见问题
11. 版本

功能一览

安装

拷贝到业务项目：

你的项目/uni_modules/kex-rich-text/

easycom 自动注册，页面直接写标签即可（无需手动 import 组件）。

要求：uni-app Vue3。

演示页：首页 → kex-rich-text，或 /pages/demos/rich-text/index。

快速上手

1. 最少代码（渲染 HTML）

<template>
  <kex-rich-text :content="html" />
</template>

<script setup>
import { ref } from 'vue'

const html = ref(`
  <h2>标题</h2>
  <p>一段 <strong>富文本</strong> 内容。</p>
  <p><img src="https://example.com/a.png" style="width:100%"/></p>
`)
</script>

内容为空时，可用默认插槽做加载提示：

<kex-rich-text :content="html">
  <view>加载中…</view>
</kex-rich-text>

2. Markdown

<template>
  <kex-rich-text markdown :content="md" theme="doc" />
</template>

<script setup>
import { ref } from 'vue'

const md = ref(`# 标题

- [x] 已完成
- [ ] 待办

| 列A | 列B |
| --- | --- |
| 1 | 2 |

\`\`\`js
const ok = true
\`\`\`
`)
</script>

3. 主题

<kex-rich-text :content="html" theme="default" />
<kex-rich-text :content="html" theme="doc" />
<kex-rich-text :content="html" theme="dark" />

<!-- 自定义 CSS 变量串 -->
<kex-rich-text
  :content="html"
  theme="--kex-rt-link:#0ea5e9;--kex-rt-code-bg:#f1f5f9"
/>

4. 图片预览 / 懒加载 / 占位

<kex-rich-text
  :content="html"
  :preview-img="true"
  :lazy-load="true"
  loading-img="/static/loading.png"
  error-img="/static/error.png"
  @imgtap="onImg"
/>

HTML 技巧：

<!-- 预览用高清图 -->
<img src="thumb.jpg" original-src="hd.jpg" />

<!-- 装饰图：不预览、不弹菜单 -->
<img src="icon.png" ignore />

5. 链接与锚点

<template>
  <kex-rich-text
    :content="html"
    :use-anchor="true"
    :copy-link="true"
    domain="https://cdn.example.com"
    @linktap="onLink"
  />
</template>

<a href="#sec">跳到章节</a>
<h2 id="sec">章节</h2>
<a href="/pages/index/index">小程序内页</a>
<a href="https://example.com">外链</a>

6. 表格横向滚动

<kex-rich-text :content="tableHtml" :scroll-table="true" />

7. 事件监听

<template>
  <kex-rich-text
    :content="html"
    @load="onLoad"
    @ready="onReady"
    @imgtap="onImg"
    @linktap="onLink"
    @play="onPlay"
    @error="onError"
  />
</template>

<script setup>
const onLoad = () => console.log('DOM 就绪')
const onReady = (rect) => console.log('图片/高度就绪', rect)
const onImg = (attrs) => console.log('点图', attrs)
const onLink = (e) => console.log('点链', e.href, e.innerText)
const onPlay = (e) => console.log('播放', e.source)
const onError = (e) => console.log('错误', e)
</script>

进阶用法

1. 编辑模式

<template>
  <kex-rich-text
    editable
    v-model:content="html"
    theme="doc"
    @edit="onEdit"
  />
</template>

<script setup>
import { ref } from 'vue'

const html = ref('<p>点工具栏插入内容，或切换「源码」编辑。</p>')
const onEdit = (e) => {
  // e.cmd / e.content
  console.log(e)
}
</script>

工具栏支持：粗体 / 斜体 / 下划线 / 标题 / 列表 / 引用 / 链接 / 图片 / 表格 / 分割线；可在「源码 / 预览」间切换。

2. ref 调用 API

<template>
  <kex-rich-text ref="rt" :content="html" :use-anchor="true" />
  <button @click="dump">导出</button>
  <button @click="append">追加一段</button>
</template>

<script setup>
import { ref } from 'vue'

const rt = ref(null)
const html = ref('<p>hello</p>')

const dump = () => {
  console.log(rt.value?.getText())
  console.log(rt.value?.getContent())
}

const append = () => {
  // 第二个参数 true：追加（流式场景）
  rt.value?.setContent('<p>more</p>', true)
}
</script>

3. 标签默认样式

<script setup>
const tagStyle = {
  p: 'margin:8px 0;line-height:1.7',
  h2: 'color:#1d4ed8;font-size:1.25em'
}
</script>

<template>
  <kex-rich-text :content="html" :tag-style="tagStyle" />
</template>

4. 插件（搜索 / 表情 / 公式等）

<template>
  <kex-rich-text :content="html" :plugins="pluginList" />
  <button @click="doSearch">搜索「富文本」</button>
</template>

<script setup>
import { ref } from 'vue'
import {
  Style,
  Search,
  Emoji,
  Highlight,
  Audio,
  Latex,
  TxvVideo,
  ImgCache
} from '@/uni_modules/kex-rich-text/components/kex-rich-text/parser/plugins/index.js'

const html = ref('<p>富文本示例 [笑] $E=mc^2$</p>')
const searchPlugin = new Search()

const pluginList = [
  Style,
  searchPlugin,
  new Emoji({ map: { 笑: 'https://example.com/smile.png' } }),
  Highlight,
  Audio,
  Latex,
  TxvVideo,
  ImgCache
]

const doSearch = async () => {
  searchPlugin.vm = {
    content: html.value,
    setContent: (c) => { html.value = c },
    // 若已挂载组件，也可把 rt.value 赋给 vm
  }
  const n = await searchPlugin.search('富文本', true)
  console.log('命中', n)
}
</script>

5. uni-app x

将本插件放入 x 工程 uni_modules 后：

<kex-rich-text
  :content="html"
  :sanitize="true"
  :scroll-table="true"
  :preview-img="true"
/>

说明见 uni-app-x/readme.md。

Props

Events

方法 ref

通过 ref 调用：

const rt = ref(null)
await rt.value?.navigateTo('sec')
rt.value?.pauseMedia()

插件

路径：

@/uni_modules/kex-rich-text/components/kex-rich-text/parser/plugins/index.js

自定义插件钩子：onUpdate(content) / onParse(node, vm) / onLoad() / onDetached()。

多端说明

App 端图片长按保存依赖相册权限，请在 manifest.json 中按需配置。

常见问题

Q：内容不显示？
检查 content 是否为空；危险标签在 sanitize=true 时会被去掉。可临时设 :sanitize="false" 对比（勿对不可信内容关闭）。

Q：图片点不开预览？
确认 preview-img 为 true，且图片未设置 ignore。

Q：锚点无效？
需 :use-anchor="true"，目标带 id；在 scroll-view 内需调用 in(...)。

Q：Markdown 不生效？
需加 markdown 或 :markdown="true"。

Q：编辑如何拿到 HTML？
v-model:content 或 ref.getContent()。

版本

当前：1.0.0（见 package.json / changelog.md）