RichText

富文本

参考文档

类型

ComponentType<RichTextProps>

示例代码

React

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} />

)

}

}

Vue

<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

参数	类型	必填	说明
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	✔️	✔️	✔️	✔️	✔️	✔️