Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Configuring a Rich text editor control

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Provide the user with a familiar interface for adding and editing text. By using standard word processing tools, such as fonts and formats, the Rich text editor control helps application users style their text, which improves presentation and usability.

Before you begin: Add a Rich text editor control to the layout.

For more information, see Adding UI components to a view.

Note:

Because the control relies on HTML for formatting, it interprets all text between the less than (<) and greater than (>) symbols as an HTML tag, and excludes it at run time. For example, if you configure the Rich text editor to source text from a property, and that text includes a string such as <[email protected]>, the editor does not display the string. To include all characters in the text, add a leading space after the less than symbol, or use a Text area control.

At runtime, the Rich text editor does not support style inclusions.

  1. Open the view with the control that you want to edit.
    For more information, see Accessing views in your application.
  2. In the configuration pane on the right side of the window, hover over the control, and then click the Edit icon.
  3. On the General tab, in the Property field, define the property that you want to associate with the control:
    • To select an existing property, in the Property field, press the Down arrow key, and then click the property.
    • To create a new property, click the Open icon next to the Property field, and then configure a new property record. For more information, see Properties.
  4. In the Default value field, define the text that appears in the control automatically:
    • To use a fixed value, enter the text manually.
    • To tie the default value to an expression, click Open expression builder, and then define the expression that you want to use.
  5. In the Toolbar Options section, select the formatting tools that you want to include in the toolbar.
    You can configure the toolbar to include additional elements, such as tables, formats, and indentation. In addition, you can decide to remove mouse-only operations, such as Resize, to improve accessibility.
    Depending on the format in which you want to store images, you can drag an image into the control to convert it to a secure base64 binary file, or use the Image uploader tool to save the file as a data-content image.
  6. On the Presentation tab, in the Specify width field, define the size of the control:
    • To use view settings to define the size of the control, in the Specify width and Specify height fields, click Auto.
    • To define a specific width, in the Specify width field, click Custom, and then define the size of the control in pixels or as a percent ratio.
    • To define a specific height, in the Specify height field, click Custom, and then define the size of the control in pixels.
    • To make the control size dependent on the amount of text that the user enters, in the Specify height field, click Size to content.
  7. In the RTE Type field, define whether you want to use the full or limited version of the control.
    The lightweight mode does not support all features, and works best with static content.
  8. Click Apply.
  • Creating a custom plug-in for the Rich text editor

    Add new functionalities to a Rich text editor control by installing custom plug-ins. For example, you can add a code formatting option to the Rich text editor toolbar, to improve the user experience.

  • Adding an external plug-in to the Rich text editor

    Provide your users with tools to perform complex operations in the Rich text editor control by adding external plug-ins. For example, you can install a plug-in that supports mathematical notation to improve the usefulness of the Rich text editor for scientific audiences.

  • Spell checker

    Pega Platform includes an industry-standard tool that flags spelling mistakes. When you provide your users with a spell checker, you reduce input errors, and make the user experience more efficient.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us