Version: next
RichText
富文本
类型
ComponentType<RichTextProps>
示例代码
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} />
)
}
}
RichTextProps
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| nodes | Nodes | 否 | 节点列表/ HTML String |
| space | "ensp" | "emsp" | "nbsp" | 否 | 显示连续空格 |
API 支持度
| API | 微信小程序 | H5 | React Native |
|---|---|---|---|
| RichTextProps.space | ✔️ |
TSpace
space 的合法值
| 参数 | 说明 |
|---|---|
| ensp | 中文字符空格一半大小 |
| emsp | 中文字符空格大小 |
| nbsp | 根据字体设置的空格大小 |
Text
文本节点
| 参数 | 类型 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|
| type | "text" | 文本类型 | ||
| text | string | "" | 文本字符串 | 支持 entities |
HTMLElement
元素节点，默认为元素节点 全局支持class和style属性，不支持 id 属性。
| 参数 | 类型 | 必填 | 说明 | 备注 |
|---|---|---|---|---|
| type | "node" | 否 | HTML 类型 | |
| name | string | 是 | 标签名 | 支持部分受信任的 HTML 节点 |
| attrs | Object | 否 | 属性 | 支持部分受信任的属性，遵循 Pascal 命名法 |
| children | Nodes | 否 | 子节点列表 | 结构和 nodes 一致 |
Nodes
节点类型
现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*
类型
(Text | HTMLElement)[] | string
API 支持度
| API | 微信小程序 | 百度小程序 | 支付宝小程序 | 字节跳动小程序 | H5 | React Native |
|---|---|---|---|---|---|---|
| RichText | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |