Back to Tooljet

Text Editor

docs/versioned_docs/version-2.50.0-LTS/widgets/rich-text-editor.md

3.20.154-lts2.6 KB
Original Source

Text Editor

The Text Editor component is used to enter and edit text in HTML format. It is recommended for blog posts, forum posts, or notes sections. The entered text is used as the label for the radio button.

<div style={{paddingTop:'24px'}}>

Properties

PropertyDescriptionExpected Value
PlaceholderA hint displayed to guide the user on what to enter.String (e.g., John Doe).
Default ValueThe default value that the component will hold when the app is loaded.String (e.g., Default Text).
</div> <div style={{paddingTop:'24px'}}>

Component Specific Actions (CSA)

There are currently no Component-Specific Actions (CSA) implemented to regulate or control the component.

</div> <div style={{paddingTop:'24px'}}>

Exposed Variables

VariableDescriptionHow To Access
valueHolds the value entered by the user in the component.Accessible dynamically with JS (for e.g.,{{components.richtexteditor1.value}}).
</div> <div style={{paddingTop:'24px'}}>

General

Tooltip

A tooltip provides additional information when the user hovers over the component. Under the General settings, you can set the tooltip text in string format. Hovering over the component will display the string as the tooltip.

</div> <div style={{paddingTop:'24px'}}>

Devices

PropertyDescriptionExpected Value
Show on desktopMakes the component visible in desktop view.You can set it using the toggle button or dynamically configure the value by clicking on fx and entering a logical expression
Show on mobileMakes the component visible in mobile view.You can set it using the toggle button or dynamically configure the value by clicking on fx and entering a logical expression
</div> <div style={{paddingTop:'24px'}}>

Styles

PropertyDescriptionConfiguration Options
VisibilityControls component visibility. Toggle or set dynamically.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
DisableEnables or disables the component. Toggle or set dynamically.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Box-shadowSets the box shadow properties of the component.Select the box shadow color and adjust the related properties or programmatically set it using fx.
</div>