How to add custom styles to RTE component dynamically in AEM6.3?

[nishaSharma]

Hi Guys,

We have a requirement like:

We are using single RTE component across multiple brand sites. So we need to load some site specific styles to RTE component(RichTextEditor).

For example: We have two sites: SiteA and SiteB. Now we want if we drag and drop RTE component on a page of SiteA, some SiteA specific styles get added to RTE component and when we drop RTE on SiteB page, some SiteB specific styles get added to RTE.

How to achieve this? Please suggest.

Thanks in advance

[nishaSharma]

We are using Touch UI RTE component and need to add custom styles in it ,based on the specific site page it is being dropped on.

Do we need to implement listeners(event handler) on dialog ready event??

Any help would be really appreciable..?? We have to implement it in our next release of sprint.

Thanks

[edubey · Accepted solution]

Referring to the original implementation of styles plugin

/libs/clientlibs/granite/coralui2/optional/rte/js/components/rte/plugins/StylesPlugin.js

Configs are taken from styles node in the rtePlugins config in component

Overlay this file, have a separate node structure outside component to maintain css styles the way you do in plugin config.

Change method getStyles in above file to read the values from you node structure based on the current page hierarchy