RichText

富文本

参考文档

类型

  1. ComponentType<RichTextProps>

示例代码

  • React
  • Vue
  1. class App extends Components {
  2.   state = {
  3.     nodes: [{
  4.       name: 'div',
  5.       attrs: {
  6.         class: 'div_class',
  7.         style: 'line-height: 60px; color: red;'
  8.       },
  9.       children: [{
  10.         type: 'text',
  11.         text: 'Hello World!'
  12.       }]
  13.     }]
  14.   }
  15.   render () {
  16.     return (
  17.       <RichText nodes={this.state.nodes} />
  18.     )
  19.   }
  20. }
  1. <template>
  2.   <view class="components-page">
  3.     <rich-text :nodes="nodes"></rich-text>
  4.   </view>
  5. </template>
  8. <script>
  9. export default {
  10.   name: 'Index',
  11.   data() {
  12.     return {
  13.       nodes: [{
  14.         name: 'div',
  15.         attrs: {
  16.           class: 'div_class',
  17.           style: 'line-height: 60px; color: red;'
  18.         },
  19.         children: [{
  20.           type: 'text',
  21.           text: 'Hello World!'
  22.         }]
  23.       }]
  24.     }
  25.   },
  26.   onReady () {
  27.     console.log('onReady')
  28.   }
  29. }
  30. </script>

RichTextProps

参数类型必填说明
nodesNodes否节点列表/ HTML String
space“ensp” | “emsp” | “nbsp”否显示连续空格

API 支持度

API微信小程序H5React Native
RichTextProps.space✔️

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*

类型

  1. (Text | HTMLElement)[] | string

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
RichText✔️✔️✔️✔️✔️✔️