开发
API

rich-text

基础库 1.0.0 开始支持本组件

富文本。

代码示例

开发者工具中预览

属性说明

属性名类型默认值必填说明最低支持版本
nodesarray/string[ ]节点列表 / HTML String1.0.0

nodes

nodesarray 类型时,node 现支持两种类型节点,通过 type 来区分,分别是 元素节点 和 文本节点 ,默认是元素节点。

说明
node元素节点
text文本节点

type=node

在富文本区域里显示的 HTML 节点,元素节点支持的属性如下:

属性名类型默认值必填说明最低支持版本
namestring--标签名,支持部分受信任的 HTML 节点1.0.0
typestring'node'节点类型1.0.0
attrsobject--属性,支持部分受信任的属性,遵循 Pascal 命名法1.0.0
childrenarray[]子节点列表,结构和 nodes 一致1.0.0

type=text

文本节点支持的如下:

属性名类型默认值必填说明最低支持版本
textstring--文本内容,支持 entities1.0.0
typestring'node'节点类型,此处需要修改成 'text'1.0.0

受信任的 HTML 节点属性说明

全局支持 class 和 style 属性,不支持 id 属性。

节点额外支持的属性最低支持版本
a-1.0.0
abbr-1.0.0
address--1.78.0
article--1.78.0
aside--1.78.0
b-1.0.0
bdi--1.78.0
bdodir1.78.0
big--1.78.0
blockquote-1.0.0
br-1.0.0
caption--1.78.0
center--1.78.0
cite--1.78.0
code-1.0.0
colspan, width1.0.0
colgroupspan, width1.0.0
dd-1.0.0
del-1.0.0
div-1.0.0
dl-1.0.0
dt-1.0.0
em-1.0.0
fieldset-1.0.0
font--1.78.0
footer--1.78.0
h1-1.0.0
h2-1.0.0
h3-1.0.0
h4-1.0.0
h5-1.0.0
h6-1.0.0
header--1.78.0
hr-1.0.0
i-1.0.0
imgalt, src, height, width1.0.0
ins-1.0.0
label-1.0.0
legend-1.0.0
li-1.0.0
mark--1.78.0
nav--1.78.0
olstart, type1.0.0
p-1.0.0
pre-1.0.0
q-1.0.0
rt--1.78.0
ruby--1.78.0
s--1.78.0
section--1.78.0
small--1.78.0
span-1.0.0
strong-1.0.0
sub-1.0.0
sup-1.0.0
tablewidth1.0.0
tbody-1.0.0
tdcolspan, height, rowspan, width1.0.0
tfoot-1.0.0
thcolspan, height, rowspan, width1.0.0
thead-1.0.0
trcolspan, height, rowspan, width1.78.0
tt--1.78.0
u--1.78.0
ul-1.0.0
videosrc, poster1.0.0

扫码体验

请使用字节宿主APP扫码

Bug & Tip

  • Tip:nodes 推荐使用 array 类型,由于组件会将 string 类型转换为 array 类型,因而性能会有所下降。
  • Tip:rich-text 中的 html 内容不会触发绑定事件(如:bindtap 等),bindtap 等绑定事件只会在最外层的 rich-text 标签上触发
  • Tip:attrs 属性不支持 id,支持 class。
  • Tip:name 属性大小写不敏感。
  • Tip:如果使用了不受信任的 HTML 节点,该节点及其所有子节点将会被移除。
  • Tip:img 标签仅支持网络图片,并且只支持 HTTPS 协议。
  • Tip:video 标签仅支持网络视频,并且只支持 HTTPS 协议。
  • Tip:如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 ttss 样式对 rich-text 中的 class 生效。
点击纠错
评价此篇文档