How to Add CSS Classes to Heading Tags in Rich Text Editor (RTE) in AEM

In the Adobe Experience Manager (AEM), the Rich Text Editor (RTE) allows users to input and format text, similar to what you’d experience with any typical word processing software. But what if you want to add a CSS class to a heading tag within the RTE? This article will walk you through the steps.

Key Takeaways

• Understanding the functionality of AEM’s Rich Text Editor (RTE) and CSS is crucial.
• Adding CSS classes to heading tags in RTE involves customizing the RTE configuration.
• The process involves creating the CSS file, linking it to the RTE, and modifying the RTE configuration.
• Testing the applied styles is an essential part of the process.

1. Understanding the Concept

AEM’s Rich Text Editor (RTE)

Adobe Experience Manager’s Rich Text Editor (RTE) allows content authors to create and format text content within the AEM interface. Key features include:

• Text formatting (bold, italic, etc.)
• Paragraph formatting (alignment, lists)
• Hyperlink and media embedding
• Table creation and editing
• HTML source code editing
• Extensible with custom plugins

CSS in AEM

CSS is used to style components and pages in AEM, ensuring a consistent and appealing design. Key aspects include:

• Component Styling: Each component can have specific CSS.
• Global Styles: Consistent styling across the site with global CSS.
• Client Libraries (Clientlibs): Manage and include CSS and JavaScript efficiently, with features like dependency management, minification, and caching.

Integration

The RTE’s HTML output is styled using CSS to maintain a cohesive look and feel across the website. Proper use of CSS ensures that rich text content is visually consistent with the site’s overall design.

Defining the Styles

The first step to adding a CSS class to a heading tag is to define the class in a CSS file. This is where you specify the styles that you want to apply to the heading tags.

3. Linking the CSS File to the RTE

Connecting Styles with the RTE

Once the CSS file is ready, the next step is to link it to the RTE. This can be done in the dialog of the component that uses the RTE. You need to add the path of the CSS file to the externalStyleSheets property.

4. Customizing the RTE Configuration

Adding the CSS Class to the Styles Dropdown

To make the CSS class available in the RTE, you need to add it to the styles dropdown in the RTE configuration. This involves modifying the _cq_htmlTag property in the RTE node of the dialog.

5. Modifying the Allowed Styles

Restricting the RTE to Specific CSS Classes

In some cases, you might want to restrict the RTE to specific CSS classes. This can be achieved by adjusting the allowedPaths configuration in the RTE.

6. Applying the CSS Class

Using the Styles Dropdown

With the CSS class available in the styles dropdown, content authors can now apply it to heading tags. This is as simple as selecting the text and choosing the desired class from the dropdown.

7. Testing the Applied Styles

Verifying the Outcome

After applying the CSS class, it’s important to test whether the styles are correctly applied. This involves previewing the page and inspecting the heading tags in the browser.

8. Troubleshooting

Solving Potential Issues

If the styles are not applied as expected, some troubleshooting might be required. Common issues include incorrect CSS file path, errors in the CSS file, or misconfiguration in the RTE.

In conclusion, adding CSS classes to heading tags in AEM’s Rich Text Editor requires some understanding of AEM configurations and CSS. However, with this guide, the process should be more approachable.