RichText - 《Taro 文档帮助手册教程》

sidebar_label: RichText
Type
Examples
RichTextProps
Nodes
- Type
API Support

title: RichText

sidebar_label: RichText

Rich text.

Reference

Type

ComponentType<RichTextProps>

Examples

import Tabs from ‘@theme/Tabs’ import TabItem from ‘@theme/TabItem’

tsx
class App extends Components {
  state = {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    }]
  }
  render () {
    return (
      <RichText nodes={this.state.nodes} />
    )
  }
}

html
<template>
  <view class="components-page">
    <rich-text :nodes="nodes"></rich-text>
  </view>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      nodes: [{
        name: 'div',
        attrs: {
          class: 'div_class',
          style: 'line-height: 60px; color: red;'
        },
        children: [{
          type: 'text',
          text: 'Hello World!'
        }]
      }]
    }
  },
  onReady () {
    console.log('onReady')
  }
}
</script>

RichTextProps

Property	Type	Default	Required	Description
nodes	`Nodes`	No	The node list/HTML string
space	`"ensp" \| "emsp" \| "nbsp"`	No	Displays consecutive spaces

Property Support

Property	WeChat Mini-Program	H5	React Native
RichTextProps.space	✔️

TSpace

Valid values of space

Value	Description
ensp	En space
emsp	Em space
nbsp	The size of the space is set according to the font setting

Text

text node

Property	Type	Default	Description	Remarks
type	`"text"`		Text type
text	`string`	`""`	Text string	`support entities`

HTMLElement

element node(defaulted)

The class and style properties are supported globally. The id property is not supported.

Property	Type	Required	Description	Remarks
type	`"node"`	No	HTML type
name	`string`	Yes	Tag name	`Supports some trusted HTML nodes.`
attrs	`Object`	No	Property	`Supports some trusted properties. The name complies with the Pascal naming convention.`
children	`Nodes`	No	Child node list	`The structure of child nodes is the same as that of nodes.`

Nodes

node type

Currently, two nodes are supported, which are distinguished according to the type: element node and text node. It is the element node by default. HTML nodes are displayed in the rich text area. Element node: type = node*

Type

(Text | HTMLElement)[] | string

API Support

API	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
RichText	✔️	✔️	✔️	✔️	✔️	✔️