RichText

Rich text.

Reference

Type

ComponentType<RichTextProps>

Examples

React

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} />
    )
  }
}

Vue

<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	✔️	✔️	✔️	✔️	✔️	✔️