Add rich text to a page

Note

This topic explains how to configure components previously built with Content Editor. To learn about components built with XM Cloud Components instead, visit the XM Cloud Components documentation.

Using a Rich Text component lets you easily add and format text on a webpage. Rich Text components are initially built in the Content Editor, and are available for use in the left-hand pane of XM Cloud Pages, on the Components tab.

Note

To enable the latest rich text editing capabilities from CKEditor, such as adding a table to a Rich Text component, your app must use JSS 21.5.2 or later. Also, a developer needs to add PAGES_ENABLE_NEW_RTE_EDITOR as an environment variable in the XM Cloud Deploy app, and then redeploy the environment.

This type of component can be styled by applying information from the style sheet for your website. Also, you can use them to perform inline edits, which means editing the text of the component directly on the page in Pages. In short, Rich Text components display text and tables as they will appear on your live website.

To add a Rich Text component to a page:

  1. In XM Cloud Pages Editor mode, in the left-hand pane, on the Site tree tab, click the page you want to add a component to.

  2. On the Components tab, scroll down to find the Rich Text component icon.

  3. Click and drag the icon onto a placeholder on the canvas of the page.

  4. Enter the text you want to add to the page, or add a table or a media file to the component.

The toolbar of the CKEditor

You can apply the following options to the contents of a Rich Text component:

  • Text formatting such as bold, italic, underline, block quote, strikethrough, subscript, and superscript.

  • Predefined paragraph style, to apply customized styles and semantic values to content created in the editor.

  • Text alignment, bulleted and numbered lists, and horizontal lines.

    Note

    You can start a numbered list from any value. To do this, expand the numbered list type in the rich text editor’s toolbar, select list properties, and enter the chosen start value.

  • Indentation.

Note

The rich text editor supports keyboard shortcuts.

In addition, you can use the toolbar to:

  • Create or edit a hyperlink Link.

  • Insert a media file Select media.

  • Add a table Table.

  • Find and replace text Find and replace.

  • Remove formatting from highlighted text Remove format.

  • Open the source code editor Edit format code.

  • Erase all text entered in the field Reset field value

With CKEditor you can:

  • Create a hyperlink to an internal page, chosen from the site tree. 

  • Create a hyperlink to a phone number, prompting the device's phone client when clicked.

    Note

    CKEditor automatically recognizes email links, so you don't need to specify the link type to prompt the device’s email client when clicked.

  • Paste iFrame tags into the HTML editor to embed an iFrame in the field.

Do you have some feedback for us?

If you have suggestions for improving this article,