Custom Rich Text Styles Not Visible in Edit Mode

[AdrianaCa3]

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

[ayush-anand · Accepted solution]

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_]

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...

Thanks