Rich Text Editor

The Rich Text Editor (RTE) field enables users to input different types of content such as text, image, videos, and so on. When you add an RTE field in a content type, it displays a text area with editing and formatting options in the entry page. This field allows you to edit and format content entered in the field without using HTML tags (however, you can use HTML tags in the HTML mode, if needed).

Customized Rich Text Editor

Apart from choosing between the Basic and Advanced editors, developers can also choose the Custom editor, while adding the RTE field to content types. 

The Custom editor allows you to choose from the various formatting options, and control what will be available in the RTE toolbar for content managers.

Note: Only the stack owner, admins, and users assigned “Developer” roles have the right to customize the RTE field.

To customize the RTE field, log in to your Contentstack account, and perform the following steps:

  1. In the Content Type Builder page, add the Rich Text Editor (RTE) field to it.
  2. In the Edit Properties section of the RTE field, under Editor Version, select Latest.
  3. Under the Editor Type, select Custom, and choose the formatting options you want to include in the RTE field. To select all the formatting options, check the Select All box.
  4. After adding and configuring the fields, click on either Save or Save and Close button to save your content type.

Adding new RTE field.gif

Now, when the content managers edit or create an entry of this content type, they will see the RTE with the formatting/inserting options that you selected in the above step.

Note: You can select the Custom editor only if you are using the latest version of the RTE.

Upgrade RTE

If your stacks were created before 26th Oct, 2018, chances are that you are using an older version of the RTE in your content types. You can switch to the new version (and back to the older version) any time by editing the properties.

Note: Stacks created post 26th Oct, 2018, will have the new RTE by default and will not have access to the old version of the RTE.

To switch to the new version of the RTE, log in to your Contentstack account, and perform the following steps:

  1. Create a content type, and add the Rich Text Editor (RTE) field.
  2. In the Edit Properties section of the RTE field, under Editor Version, select Latest.

    Note: You can switch back to the older version any time by selecting the Old option under the Editor Version property.

    Editor Version of RTE field
  3. Optionally, under Editor Type, you can choose between Basic and Advanced as per your requirement.
    Editor Type of RTE field.png
  4. After configuring RTE, click on either Save or Save and Close button to save your content type.

After confirming the RTE, you will see the new version of the RTE on the entry page as shown below:

Subscript Superscript in RTE field.png

Additional Resource: You can read more about Field Visibility Rules in our documentation where we have covered it extensively.

RTE Fixes/Improvements

On Dec 16, 2020, we updated our RTE field to fix an XSS vulnerability. This fix introduced the following changes in the RTE field: 

  1. Removal of the malicious content from these tags: a, b, i, img, svg, details
  2. Removal of the associated attributes from the aforementioned tags: onload, onerror, ontoggle, onwheel, onmouseover, oncopy

Note: If you had added any JavaScript code in the <a> tag within the ahref attribute before this fix, you will no longer be able to view that code. You can recover the code from the previous versions of the entry. To do so, refer to the Compare Entry Versions article.

RTE Shortcut Keys

Remove FormatCTRL + SHIFT + m⌘ + SHIFT + m
UndoCTRL + z⌘ + z
RedoCTRL + y or SHIFT + CTRL + z⌘ + y or SHIFT + ⌘ + z
BoldCTRL + b⌘ + b
ItalicCTRL + i⌘ + i
SuperscriptCTRL + h⌘ + h
SubscriptCTRL + l⌘ + l
LinkCTRL + k⌘ + k
Numbered ListCTRL + Shift + 7⌘ + SHIFT + 7
Bulleted ListCTRL + Shift + 8⌘ + SHIFT + 8
Normal (Paragraph)CTRL + Alt + 0⌘ + Option + 0
Heading 1CTRL + Alt + 1⌘ + Option + 1
Heading 2CTRL + Alt + 2⌘ + Option + 2
Heading 3CTRL + Alt + 3⌘ + Option + 3
Heading 4CTRL + Alt + 4⌘ + Option + 4
Heading 5CTRL + Alt + 5⌘ + Option + 5
Heading 6CTRL + Alt + 6⌘ + Option + 6

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page