Skip to content
  • There are no suggestions because the search field is empty.

Rich text feature

This article highlights the rich text feature and how to use it optimally in your application

Rich text is a kind of text formatting that allows you to create and display formatted text and/or basic code in your application.

 

As shown in the example, the HTML tag <b> opens the Bold statement, and the tag </b> closes the bold statement, displaying all text in between in Bold. Rich text also allows you to style your text with formatting options such as italic or underlined: <i></i>, <u></u>

For more advanced use cases, this also means that you can request users to insert pieces of code via the rich text input field or display code via the rich text display.

Rich text in use

Text can be displayed as rich text (HTML) on a page. A builder can make this happen when using either:

  • Text component > Styling > Display rich text option

Make sure you've enabled this option for the rich text to be displayed in a runtime: 

  • Rich text editor component > Value option

In most cases, we see applications that require users to write bigger pieces of text, such as a blog, implementing a rich text input as it allows your application users to format their text.

Using the HTML feature of rich text and its security

Collecting script code and displaying it can be handy for applications that need to show solutions in code, do sanitization checks, or have other uses for scripts.

It is important to note that poorly written code can lead to significant issues, so we want to provide guidance on how to prevent code from being inadvertently collected or displayed.

You can turn off the Display Rich Text option in your Text component to prevent your pages from displaying rich text code.

The rich text option on a text component
 

To prevent your application from collecting rich text HTML input, you can either use a regular text input field in your form or scan and sanitize the input data in your action before saving it in your application.

You can do this by comparing text from the code in a condition step, or by using the expression step to replace tags such as the <script> tag with a keyword before saving it in your application. This will allow you to check and make any sanitization changes before using the code in your application.

An action using a custom action step that replaces the script tag from a rich text input.

 

Note: this is but an example, test any feature you build carefully, ensuring your features are built as intended.