Rich Text Editor

A Rich Text Editor (RTE) enables web editors to create and format text content efficiently. It provides a variety of formatting options and essential tools like tables, anchor links, and lists.

This component is replacing Article component.

Best Practice

Do

Create proper headings by using "Paragraph formats" or the Headline component.

This is a proper headline formatted as a H4

Don't

Do not rely on layout alone, such as using bold text, for headings. The reason for this is that it is not coded as a heading, and therefore, it negatively impacts accessibility and SEO.

Bolded text looking like a heading

Digital Accessibility Guidelines

The lead text style should be applied when the RTE is placed within a Flex container, serving as a hero element positioned at the top of a page. Bullet list text in this example below:

Bolånekalkyl – räkna på bolån

Räkna ut hur mycket du kan låna
Se vad ditt lån kommer att kosta varje månad
Räkna på din lånekostnad om räntan ändras

Räkna på bolån

Introductory texts on pages, like the one on this page:

A Rich Text Editor (RTE) enables web editors to create and format text content efficiently. It provides a variety of formatting options and essential tools like tables, anchor links, and lists.

This component is replacing Article component.

How to configure Lead text style

Copying text into an RTE without ensuring it's free of incorrect formatting can disrupt the layout and styling of the content, leading to inconsistencies and a less professional appearance. A tool that helps with that is Paste as Text.

Paste as Text

Configuration in AEM

The RTE includes a Bold function for emphasizing text. However, it's important to note that bold text does not substitute for a headline because it is not coded as one, which is crucial for SEO and accessibility purposes.

Under paragraph formats, you set the various heading levels (H2-H4) and body text (Paragraph).

By using the Paste as Text function, you ensure that no incorrect formatting is included when pasting from Word or elsewhere.

In the RTE, you can create three types of lists;

Bullet List
Numbered List
Link List

How to Create a Bullet List

Write your bullet text in the text area
Mark the text and select the bullet list option

Bullet List Styles

There are two styles for bullet lists: Extra small (default) and Small.

Select the bullets
Go to Styles tab
Select the bullet style you prefer and that suits your content.

Extra small bullets:

Bullet one
Bullet two
Bullet three

Small bullets:

Bullet one
Bullet two
Bullet three

How to Create a Numbered List

Write your list text in the text area
Mark the text and select the numbered list option

Numbered List:

Item one
Item two
Item three

How to Create a Link List

Write your list text in the text area
Mark the text and select the bullet list option

Go to Styles tab
Select "Link list" in Bullet List Styles dropdown menu

Create the link by marking the text and clicking on the Hypelink symbol.

Depending on the type of link you are creating, there are different steps to consider.

How to Create Links for SEO and Accessibility

Link List

Type in your text or a list in the text area
Go to Styles tab
Select "Lead text" in Bullet list styles tab

In the RTE, you can create various types of links:

Go to page
Anchor
Email
Phone
Documnet
Withdraw cookie consent
Open cookie settings

How to Create Links for SEO and Accessibility

An anchor link is a hyperlink that directs users to a specific section within the same webpage. It allows for easy navigation by jumping directly to the targeted content. The Rich Text Editor is used to create anchor links.

How to Create Anchor Links

Tables are designed to display data, making it easier to understand and get an overview of complex information. The Rich Text Editor component is used to create tables.