富文本
类型
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” or “emsp” or “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 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
