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">
      <view class="uni-btn-v">
        <navigator url="/pages/component/rich-text/rich-text-tags">
          <button type="primary">rich-text渲染单个HTML标签示例</button>
        </navigator>
      </view>
      <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;" :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>