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 Components instead, visit the Components documentation.

Using a Rich Text component lets you easily add, inline edit, 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 the page builder, on the Components tab. Rich Text components display text and tables as they will appear on your live website.

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.

To add a Rich Text component to a page:

In the page builder Editor mode, in the left-hand pane, on the Site tree tab, click the page you want to add a component to.
On the Components tab, scroll down to find the Rich Text component icon.
Click and drag the icon onto a placeholder on the canvas of the page.
Enter the text you want to add to the page, or add a table or a media file to the component.

Using the CKEditor toolbar, you can apply the following options to the contents of a Rich Text component:

Icon	Label	Description
	Bold	Make the selected text bold.
	Italic	Italicize the selected text.
	Underline	Underline the selected text.
	Strikethrough	Strike the selected text.
	Block quote	Include block quotations or pull quotes in your content.
	Superscript	Convert the selected text to (x).
	Subscript	Convert the selected text to (x).
	Font color	Change the color of the font. Includes a color picker.
	Font background color	Change the color of the background of the font. Includes a color picker.
	Heading	Select a predefined paragraph style to apply custom styling and semantic values to the content.
	Text alignment	Align left, align right, align center, or justify.
	Bulleted list	Add a bulleted list.
	Numbered list	Add a numbered list. 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.
	Horizontal line	Add a horizontal line.
	Decrease or Increase indent	Increase or decrease the indentation of a paragraph.
	Link	Create or edit a hyperlink. You can also use this to link to an email address. 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.
	Select media	Insert a media file.
	Table	Add a table.
	Find and replace	Find and replace text.
	Remove format	Remove formatting from the selected text.
	Edit format code	Open the source code editor. You can also paste iFrame tags into the HTML editor to embed an iFrame in the field.
	Reset field value	Erase all text in the field.
	Insert internal link	Create a hyperlink to an internal page, chosen from the site tree.
	Add phone number	Create a hyperlink to a phone number, prompting the device's phone client when clicked.

Note

The rich text editor supports keyboard shortcuts.

Do you have some feedback for us?

If you have suggestions for improving this article,