Skip to main content

富文本

富文本

适用场景

富文本编辑器(Multi-function Text Editor) 简称 MTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。适用的场景有以下四种情况:(1)对于标准的表单文本组件,无法满足样式、排版、配置等复杂的文本场景;(2)大于大段文本内容地样式优化;(3)对于用户有DIY文本创造需求,需要上传整块含有样式的文本内容区域的场景;(4)适用于需要在输入中插入图片或者视频的场景。

属性介绍

属性分类属性名称属性作用
基本属性组件ID组件在当前页面的唯一标识。
组件标题定义组件的标题
提示文案设置文本框的提示信息
展现方式包含编辑模式、只读模式、文本模式和继承父组件模式。用以页面在不同业务模式下的展示区分。
显示条件包含无条件和表达式输入两种情况
数据属性选择字段将该组件与当前上下文中的数据对象的字段进行绑定,绑定成功之后,组件标题自动进行更新
默认值设置当前富文本框中对应的默认值
校验规则必填选中必填时,配置对应的提示项,当该项未填写数据时,显示错误提示信息img
自定义函数选中自定义函数时,设置校验规则的名称,配置对应的表达式以及输入错误提示信息img
交互属性值变化当富文本中的输入值,发生更新时,触发动作的执行

基础功能

富文本组件是一个支持自定义文本格式以及可以容纳多媒体资源的容器,使用场景丰富,基本用法如下:

步骤1: 新建标准页面,页面布局为弹窗形式,如下所示:

img

步骤 2: 从左侧的组件列表中拖动“表单”组件到画布区域,在表单的属性配置面本中,配置数据源为上下文,配置流程参照上文的表单组件。

步骤 3: 从左侧的组件列表中拖动“富文本”组件到表单组件中,(此处如果无表单组件,则无法进行选择字段操作,页面如下图),在右侧富文本组件的属性配置面板中可以进行字段选择操作,如下图所示。

img

img

步骤 4:在右侧富文本组件的属性配置面板中,点击“选择字段”,在弹窗中选择字段“sName”,如下图所示,设置默认值为常量输入“小明”。

img

步骤 5: 配置校验规则,选中必填复选框,表明该字段为必填项。设置错误提示如下图所示。

img

步骤 6: 当文本框中的输入值变化时,配置相应的动作实现监听。如下图所示,选择保存记录。

img

最终运行态组件展示如下图所示:

img

高级功能

暂无