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

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

飞书低代码平台手册精选NaN-NaN-NaN

产品功能

适用场景

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)	设置是否只读

先进生产力和业务协同平台

联系我们立即试用

更多人气推荐

日期时间选择-桌面端|飞书低代码平台

文件上传-桌面端|飞书低代码平台

图片上传-桌面端|飞书低代码平台

人员选择-桌面端|飞书低代码平台

单选框|飞书低代码平台

行政区划单选|飞书低代码平台

先进团队，先用飞书

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

分享先进工作方式

输送行业最佳实践

全面协助组织提效

飞书产品

飞书智能伙伴

多维表格飞书项目即时消息文档视频会议妙记知识库

解决方案

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

定价

版本对比购买咨询

探索飞书

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

合作与支持

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

法律与合规

服务协议隐私政策安全合规飞书安全白皮书

下载飞书联系顾问

反馈给飞书 CEO：ceo@feishu.cn

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

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

更改地区-简体中文

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

先进生产力和业务协同平台

联系我们立即试用

更多推荐

日期时间选择-桌面端|飞书低代码平台

文件上传-桌面端|飞书低代码平台

图片上传-桌面端|飞书低代码平台

人员选择-桌面端|飞书低代码平台

单选框|飞书低代码平台

行政区划单选|飞书低代码平台

联系我们立即试用

购买咨询

购买飞书

使用咨询

电话联系