Custom Rich Text Styles Not Visible in Edit Mode | Community
Skip to main content
A
AdrianaCa3
Level 2
April 11, 2025
Solved

Custom Rich Text Styles Not Visible in Edit Mode

  • April 11, 2025
  • 2 replies
  • 566 views

Hi everyone,

In the AEM project I'm working on, we've extended the default Rich Text Editor configuration. In addition to the standard formatting options like bold, italic, and underline, we added a custom "styles" dropdown. This lets authors apply specific font styles and sizes by assigning custom CSS classes to the text (e.g. notoSans-xxs-semiBold), defined within our client libraries.

While everything works as expected on the published pages, in edit mode, the applied custom styles are not visible. The class is correctly added to the element, but the clientlib that defines the style doesn’t seem to be loaded at that point — which prevents the formatting from showing in the authoring environment.

I've attached two screenshots:

  • First: how the styled text appears correctly in published mode.

  • Second: how the same styled text appears unstyled in edit mode, despite the class being present in the markup.

Has anyone encountered this issue? Is there a recommended way to ensure that the required clientlib is loaded during edit mode so that these custom styles are visible in the RTE?

Any help or suggestions would be much appreciated. 

Thanks,
Adriana

Best answer by ayush-anand

Hi @adrianaca3,

 

Please add the extraClientlibs property in your RTE plugin config inside the cq:dialog. This ensures your custom styles clientlib loads in edit mode and reflects the applied styles.

 

https://sourcedcode.com/blog/aem/what-are-aem-extraclientlibs

 

Regards,

Ayush

2 replies

ayush-anand
ayush-anandAccepted solution
Level 4
April 11, 2025

Hi @adrianaca3,

 

Please add the extraClientlibs property in your RTE plugin config inside the cq:dialog. This ensures your custom styles clientlib loads in edit mode and reflects the applied styles.

 

https://sourcedcode.com/blog/aem/what-are-aem-extraclientlibs

 

Regards,

Ayush

    MukeshYadav_
    Community Advisor
    MukeshYadav_Community Advisor
    Community Advisor
    April 13, 2025

    Hi @adrianaca3 ,

    I have kept like below and it works, this css we can kept as part of separate clientlibs and add to extra-clietlibs of text component as it is required for edit mode only. However, If we are using text field in other component we can put clienlibs as cq.authoring.dialog.all, as this is minor css or we can keep to site clientlibs as it won't have any impact either in size or conflict.
    Here we explicitly mention .cq-RichText-editable as parent or we need to use !important

    //for edit mode .cq-RichText-editable .notoSans-xxs-semiBold { //all the css logic } //for publish mode which is already working .notoSans-xxs-semiBold { //all the css logic }

    Just for reference, a working package is available in the blog mentioned https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-blogs/the-rte-color-picker-plugin-for-aem/ba-p/745373

    Thanks

      Terms & ConditionsAccessibility statement

      Loading footer...