富文本
类型
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 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |