# Rich Text Editor

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-88bc00347f26e393e575f5f5781bfb8b853597da%2Fimage%20(337).png?alt=media" alt=""><figcaption></figcaption></figure>

## Basic

#### Base Content

This is the actual text content in the widget area, and is purely a set of long characters without any formatting applied.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-7d8f6c9382e0d0c1127289c576e2302048eafb2b%2Fimage%20(338).png?alt=media" alt=""><figcaption></figcaption></figure>

#### Placeholder

Specifies a hint that describes the expected value. The placeholder shows the hint text in the widget when nothing is selected or entered. This text disappears as soon as a value is entered in the control.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-0ad91816f89e9374758e5ffe9a64eb74f71a7b3d%2Fimage%20(214).png?alt=media" alt=""><figcaption></figcaption></figure>

## Interaction

#### Event Handlers

| Event                                         | Description                                                                                                                                                                                                                                                                                                                                                                     |
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**`Change`**</mark> | <p>The "Change" event is activated when the value of the widget is changed. When this event triggers, the associated action gets executed.<br><br><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-672dfcc7057f6d8ef62e8b3d953d6023b9a31a4c%2Fimage%20(315).png?alt=media" alt=""></p> |

#### Disabled

Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied. Shows a red-crossed warning symbol and can be customized to disable the widget according to certain conditions using low-code.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-695f356d5e8bc58072102f50922157508eb6122b%2Fimage%20(224).png?alt=media" alt=""><figcaption><p>Read-only</p></figcaption></figure>

#### Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-4aaa812d0b623487c085a616219a4515138079fb%2Fimage%20(211).png?alt=media" alt="" width="338"><figcaption><p>Set the visibility</p></figcaption></figure>

#### Read Only

Makes the entire widget disabled, and denies users any action over the element. It is grayed out for users' view to show it is read-only.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-4df0bbd8060cb3698082d0e17ab519da77a6617f%2Fimage%20(317).png?alt=media" alt=""><figcaption></figcaption></figure>

## Layout

#### Height

|       |                                             |
| ----- | ------------------------------------------- |
| Auto  | The height is auto-adjusted for the content |
| Fixed | The height of the widget is fixed           |

#### Customize Toolbar

The header part of the widget, where the formatting tools/options are displayed. These options can be customized using the Quill JS library. Refer: <https://quilljs.com/docs/modules/toolbar>

#### Hide Toolbar

This sets whether the toolbar section at the header to be displayed on the widget when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-577a398762beee31bed09807fa69fdf8fceb399a%2Fimage%20(341).png?alt=media" alt=""><figcaption></figcaption></figure>

## Style

<table><thead><tr><th width="218" align="center">Property</th><th>Description</th></tr></thead><tbody><tr><td align="center">Border Color</td><td>Set the colour to the border lines. The border lines will be shown only if that is enabled.</td></tr><tr><td align="center">Background</td><td>Users can change the colour of the text background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.</td></tr><tr><td align="center">Border Radius</td><td>This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.</td></tr><tr><td align="center">Margin</td><td>This value is set in terms of "px" number which creates the space between the border and the content of the widget.</td></tr><tr><td align="center">Padding</td><td>This value is set in terms of "px" number which creates the space between the border and outer elements.</td></tr><tr><td align="center">Border Width</td><td>Set the thickness of the border of the widget using this value. It is defined using "px" terms.</td></tr></tbody></table>