Expand my Community achievements bar.

SOLVED

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

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

View solution in original post

2 Replies

Avatar

Level 2

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

Avatar

Correct answer by
Level 10

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