RichText
Rich text.
Type
ComponentType<RichTextProps>
Examples
- React
- Vue
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} />
)
}
}
<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 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |