富文本输入-桌面端|飞书低代码平台 - 飞书官网

富文本输入-桌面端|飞书低代码平台

飞书

适用场景

使用说明

属性API

方法API

适用场景

richText，适用于需要丰富文本格式内容输入的场景，支持调整文本样式、插入图片、链接等内容的富文本表单组件。

使用说明

区域	说明	示意图
内容区	默认值富文本的默认值类型是string 支持通过富文本编辑器添加默认值，也支持切换成js输入框输入富文本默认值富文本值结构如下： //富文本值示例 "<div data-zone-id="0" data-line-index="0" data-line="true" style="white-space: pre-wrap;">标题1</div><div data-zone-id="0" data-line-index="1" data-line="true" style="white-space: pre-wrap;">标题2</div><div data-zone-id="0" data-line-index="2" data-line="true" style="white-space: pre-wrap;">标题3</div><div data-zone-id="0" data-line-index="3" data-line="true" style="white-space: pre-wrap;"><span style="color: rgb(52, 199, 36);">这是一段 </span><b>很长很长</b> <s>很长很长</s> <u>很长很长</u> <i>很长很长</i>的文本</div><div data-zone-id="0" data-line-index="4" data-line="true" style="white-space: pre-wrap;"><div elementtiming="@kunlun/app-maker-v3-element-timing" style="text-align: left;">左对齐</div></div><div data-zone-id="0" data-line-index="5" data-line="true" style="white-space: pre-wrap;"><div elementtiming="@kunlun/app-maker-v3-element-timing" style="text-align: center;">居中对齐</div></div><div data-zone-id="0" data-line-index="6" data-line="true" style="white-space: pre-wrap;"><div elementtiming="@kunlun/app-maker-v3-element-timing" style="text-align: right;">右对齐</div></div><div data-zone-id="0" data-line-index="7" data-line="true" style="white-space: pre-wrap;"><div style="text-indent: 2em" class="text-indent" elementtiming="@kunlun/app-maker-v3-element-timing">缩进</div></div><div data-zone-id="0" data-line-index="8" data-line="true" style="white-space: pre-wrap;"><span class="horizontal-line"><hr class="horizontal-line" elementtiming="@kunlun/app-maker-v3-element-timing"></span></div><div data-zone-id="0" data-line-index="9" data-line="true" style="white-space: pre-wrap;"><img src="/ae/api/v1/assets/attachment/download?token=bce5b305f6a64226ba26522cf84dd461&preview=true" image="true" alt="梨子 (1).jpg" uuid="F0lKsNgVU4P35LZDQoG0" width="316"></div><div data-zone-id="0" data-line-index="10" data-line="true" style="white-space: pre-wrap;"></div>" 默认值富文本的默认值类型是string 支持通过富文本编辑器添加默认值，也支持切换成js输入框输入富文本默认值富文本值结构如下： //富文本值示例 "<div data-zone-id="0" data-line-index="0" data-line="true" style="white-space: pre-wrap;">标题1</div><div data-zone-id="0" data-line-index="1" data-line="true" style="white-space: pre-wrap;">标题2</div><div data-zone-id="0" data-line-index="2" data-line="true" style="white-space: pre-wrap;">标题3</div><div data-zone-id="0" data-line-index="3" data-line="true" style="white-space: pre-wrap;"><span style="color: rgb(52, 199, 36);">这是一段 </span><b>很长很长</b> <s>很长很长</s> <u>很长很长</u> <i>很长很长</i>的文本</div><div data-zone-id="0" data-line-index="4" data-line="true" style="white-space: pre-wrap;"><div elementtiming="@kunlun/app-maker-v3-element-timing" style="text-align: left;">左对齐</div></div><div data-zone-id="0" data-line-index="5" data-line="true" style="white-space: pre-wrap;"><div elementtiming="@kunlun/app-maker-v3-element-timing" style="text-align: center;">居中对齐</div></div><div data-zone-id="0" data-line-index="6" data-line="true" style="white-space: pre-wrap;"><div elementtiming="@kunlun/app-maker-v3-element-timing" style="text-align: right;">右对齐</div></div><div data-zone-id="0" data-line-index="7" data-line="true" style="white-space: pre-wrap;"><div style="text-indent: 2em" class="text-indent" elementtiming="@kunlun/app-maker-v3-element-timing">缩进</div></div><div data-zone-id="0" data-line-index="8" data-line="true" style="white-space: pre-wrap;"><span class="horizontal-line"><hr class="horizontal-line" elementtiming="@kunlun/app-maker-v3-element-timing"></span></div><div data-zone-id="0" data-line-index="9" data-line="true" style="white-space: pre-wrap;"><img src="/ae/api/v1/assets/attachment/download?token=bce5b305f6a64226ba26522cf84dd461&preview=true" image="true" alt="梨子 (1).jpg" uuid="F0lKsNgVU4P35LZDQoG0" width="316"></div><div data-zone-id="0" data-line-index="10" data-line="true" style="white-space: pre-wrap;"></div>" 默认值会在组件初始化、重置、以及依赖的变量发生变化后生效占位符占位符属性的类型是string 占位符效果如下： 250px\|700px\|reset 拓展标题 250px\|700px\|reset	内容区示意图 250px\|700px\|reset
交互区	form data key 表单内的输入类组件配置了「form data key」后，表单可获取到该组件的值。比如，文本输入组件的「form data key」配置为"first_name"，表单的data信息中会包含"first_name"，并且其值为该文本输入组件的值，可以通过{ { form.data.first_name } }消费该组件的值同一个表单内有多个相同「form data key」时，均不会生效事件支持3种事件：「值改变时」、「聚焦时」、「失焦时」校验校验时机：聚焦时、值改变时、表单提交时（如在表单内）校验内容：必填最大长度可以自定义富文本字符限制，不得超过30000html字符自定义校验规则可以通过js表达自定义校验规则示例：{ {self.value === 'test' ? 'error': ''} } 只读 boolean类型禁用 boolean类型加载中 boolean类型	250px\|700px\|reset
外观区	隐藏 boolean类型，控制输入组件是否在页面上隐藏	250px\|700px\|reset

属性 API

属性	类型	默认值	描述
label	object	{ textContent:"标题", tooltipText:"", wrapping:false, layout:"top", align:"left", width:4, unit:"col" }	聚合标题相关的属性聚合标题相关的属性，包含：标题内容textContent 标题提示内容tooltipText 超出折行wrapping 标题文本对齐方式align 标题位置layout 标题宽度width 标题宽度单位unit
loading	boolean	false	是否显示加载中
formDataKey	string	{ { self.id } } 默认为组件id	值标识
disabled	boolean	false	是否禁用
hidden	boolean	false	是否隐藏
readOnly	boolean	false	是否只读
rules	json	{}	示例 rules:{ required:false, custom:"" }
placeholder	string	null	占位符

方法 API

方法	说明
setValue(value: boolean \| string \| number \| void)	设置组件值
clearValue()	清空组件值
validate()	触发校验
clearValidation()	清空校验状态
reset()	重置组件值
setDisabled(disabled: boolean)	设置是否禁用
setLoading(loading:boolean)	设置是否加载中
setHidden(visible:boolean)	设置是否隐藏
setReadOnly(readOnly:boolean)	设置是否只读

预约飞书企业效能顾问深度诊断企业痛点，定制专属 AI 办公方案

字节跳动旗下 AI 工作平台

关联文章推荐

优质内容，精华实践

先进团队，先用飞书

欢迎联系我们，飞书效能顾问将为您提供全力支持

分享先进工作方式

输送行业最佳实践

全面协助组织提效

热门产品

豆包工作伙伴

多维表格飞书项目飞书 CodeM 文档视频会议妙记知识库

解决方案

制造消费品零售金融餐饮医疗企业服务汽车

定价

版本对比购买咨询

探索飞书

加入我们关于飞书博客中心飞书研习社飞书认证官公益计划生态快讯飞行社

合作与支持

帮助中心开放平台应用目录合作伙伴联系我们更新日志管理后台友情链接举报与反馈

法律与合规

服务协议隐私政策平台行为守则安全合规

下载飞书联系顾问

Copyright © 2026 北京飞书科技有限公司京ICP备16045432号-4

京公网安备 11010802029085号增值电信业务经营许可证：京B2-20190249

更改地区-简体中文

标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题

字节跳动旗下 AI 工作平台

联系我们立即试用

预约顾问购买热线联系我们