跳到主要内容
版本:4.x

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

参数类型默认值必填说明
userSelectbooleanfalse文本是否可选,该属性会使节点显示为 block
nodesNodes节点列表/ HTML String
spacekeyof TSpace显示连续空格
selectablestringfalse(基础库 3.150.1 以前版本)true(基础库 3.150.1 及以后版本)富文本是否可以长按选中,可用于复制,粘贴,长按搜索等场景
imageMenuPreventstringfalse阻止长按图片时弹起默认菜单(将该属性设置为image-menu-prevent或image-menu-prevent="true"),只在初始化时有效,不能动态变更;若不想阻止弹起默认菜单,则不需要设置此属性
previewstring富文本中的图片是否可点击预览。在不设置的情况下,若 rich-text 未监听点击事件,则默认开启。未显示设置 preview 时会进行点击默认预览判断,建议显示设置 preview
onTapCommonEventFunction触摸。
onTouchstartCommonEventFunction触摸动作开始。
onTouchmoveCommonEventFunction触摸移动事件。
onTouchcancelCommonEventFunction触摸动作被打断。
onTouchendCommonEventFunction触摸动作结束。
onLongtapCommonEventFunction触摸后,超过 500ms 再离开。

API 支持度

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序H5React NativeHarmonyHarmony hybrid
RichTextProps.userSelect✔️✔️✔️
RichTextProps.nodes✔️✔️✔️✔️✔️✔️✔️✔️✔️
RichTextProps.space✔️✔️✔️✔️✔️✔️✔️
RichTextProps.selectable✔️✔️✔️
RichTextProps.imageMenuPrevent✔️
RichTextProps.preview✔️
RichTextProps.onTap✔️
RichTextProps.onTouchstart✔️
RichTextProps.onTouchmove✔️
RichTextProps.onTouchcancel✔️
RichTextProps.onTouchend✔️
RichTextProps.onLongtap✔️

TSpace

space 的合法值

参数说明
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小

Text

文本节点

参数类型默认值说明备注
type"text"文本类型
textstring""文本字符串支持 entities

HTMLElement

元素节点,默认为元素节点 全局支持class和style属性,不支持 id 属性。

参数类型必填说明备注
type"node"HTML 类型
namestring标签名支持部分受信任的 HTML 节点
attrsObject属性支持部分受信任的属性,遵循 Pascal 命名法
childrenNodes子节点列表结构和 nodes 一致

Nodes

节点类型

现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点 元素节点:type = node*

类型

(Text | HTMLElement)[] | string