This article highlights the rich text feature and how to use it optimally
In this article, we cover the use of rich text in your application, and what to look out for.
What is rich text
Rich text is a kind of text formatting that allows you to create and display formatted text and/or basic code in your application.
In this example, we see the Rich text input component and a text component that can display rich text.
The rich text input component allows you to style your text with formatting options such as bold, italic or underlined.
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.
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.
Where in your application can it be used
Text can be displayed as rich text (html) on a page. A developer can make this happen when using either:
-
Text component > Display rich text option
-
Rich text editor input > 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.
However, we also need to point out that badly written code can sometimes do more harm than good, therefore we would like to point out how you can prevent code to be collected or displayed.
To prevent your pages from displaying rich text code, you can turn off the Display Rich Text option in your 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 sanatization changes before using the code in your application.
Note: this is but an example, test any feature you build carefully, making sure your features are built as intended.