rich-text

# rich-text

组件类型：UniRichTextElement

富文本。可渲染文字样式、图片、超链接。支持部分HTML标签

# 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.0	4.41	3.9	4.11	4.61

# 支持的HTML标签和属性

HTML	属性	样式
br
p		text-align color background-color text-decoration
ul
li		text-align color background-color text-decoration
span		color background-color text-decoration
strong
i
big
small
a	href
u
del
h1-h6
img	src

text-decoration仅支持line-through

# 属性

名称

类型

默认值

兼容性

描述

nodes

array | string

节点列表 | HTML String

selectable

boolean

false

文本是否可选

mode

string

"web"

渲染模式

合法值

兼容性

描述

web

使用webview渲染

native

使用原生渲染

@itemclick

(event: UniRichTextItemClickEvent) => void

拦截点击事件（只支持 a、img标签），返回img标签的src属性或a标签的href属性。event.detail={ src | href }

space

string

(string)
显示连续空格

合法值

兼容性

描述

ensp

中文字符空格一半大小

emsp

中文字符空格大小

nbsp

根据字体设置的空格大小

~~user-select~~

boolean

(boolean)
文本是否可选，该属性会使节点显示为 block。已废弃，请使用 selectable

# 事件

# UniRichTextItemClickEvent

# UniRichTextItemClickEvent 的属性值

名称

类型

必填

默认值

兼容性

描述

detail

UniRichTextItemClickEventDetail

是

名称	类型	必备	默认值	兼容性	描述
src	string	否	-	-	<img/>图片链接
href	string	否	-	-	<a/>超链接

# 子组件

不可以嵌套组件

# 示例

hello uni-app x

Template

Script

<template>
  <view>
    <page-head title="rich-text"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <!-- #ifndef APP-HARMONY -->
      <view class="uni-btn-v">
        <navigator url="/pages/component/rich-text/rich-text-tags">
          <button type="primary">rich-text渲染单个HTML标签示例</button>
        </navigator>
      </view>
      <!-- #endif -->
      <view class="uni-btn-v">
        <navigator url="/pages/component/rich-text/rich-text-complex">
          <button type="primary">rich-text渲染复杂HTML示例</button>
        </navigator>
      </view>
      <view class="uni-title">
        <button type="default" @click="changeText">修改文本内容</button>
      </view>
      <view class="text-box" id="rich-text-parent" @click="richTextParentClick">
        <rich-text id="richtext" style="border: 1px; border-style: solid; border-color: red;" :selectable="true"
          :nodes="text"></rich-text>
        <view>
          <text>rich-text-parent</text>
          <text id='rich-text-str'>{{richTextStr}}</text>
        </view>
      </view>
      <view class="uni-title">
        <text class="uni-subtitle-text">selectable</text>
      </view>
      <view class="text-box2">
        <rich-text style="height: 80px;" :selectable="true"
          :nodes="text"></rich-text>
      </view>
    </view>
  </view>
  <rich-text v-if="autoTest" id="test-rich-text" :nodes="testNodes" :selectable="true" @itemclick="itemClickForTest" style="position: fixed;width: 100px;height: 100px;"></rich-text>
</template>



<style>
  .text-box {
    padding: 20px 0;
    background-color: white;
  }

  .text-box2 {
    top: 20px;
    background-color: white;
  }

</style>

# 参见

# Bug & Tips

HTML String 在 App 端支持常用但不是全部 web 样式，并且 Android 和 iOS 也略有差异。
HTML String 类型的<img/>不支持自定义宽高，默认以 rich-text 组件宽度为基准等比缩放；节点列表类型的<img />支持自定义宽高。
App-Android 平台，设置selectable属性为 true 时，itemclick事件不触发。
App-Harmony 平台的 rich-text 组件问题较多，它自身是基于web-view渲染的，不支持根据内容自适应高度，但内部支持滚动。需手动设置合适的高度。所以从服务器加载未知高度的rich-text会很麻烦，只能固定一个高度。还在等待鸿蒙官方完善。所以uni-app x目前 nodes 也仅支持 string 类型，暂未花精力处理节点列表。