AEM RTE Styles Plugin : Disable multi select

[agyawa]

I followed the below AEM Doc to create a RTE Style Plugin. I am able to add multiple classes to the selected text. I am able to select more than one option at the same time from the style dropdown. Is there a way that can make styles plugin to not select more than one stye for any selected text? 

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/con...

[SantoshSai]

Hi @agyawa,

That’s actually the default behavior of the RTE Styles plugin - it allows multiple style classes to be added to the same text. There isn’t a built-in configuration to limit it to a single style at a time.

If you want the dropdown to behave like a “radio button” (only one style active at a time), you’d need to customize the plugin a bit. The usual approach is to extend the existing styles plugin and, before applying a new class, remove any of the other style classes that you’ve defined in your config. That way, whenever an author applies a new style, it automatically clears the old one first.

In short:

• OOTB Styles plugin = multiple classes allowed

• Custom plugin override = only one style at a time (by removing previous style classes in code)

You can do this by adding a small clientlib that hooks into the execCmd function for the styles plugin. There’s no official property like allowMultiple: false in the config, so it needs a bit of JS logic.

Hope that helps!

[ManviSharma · Accepted solution]

Hello @agyawa ,

To prevent users from selecting more than one style from the Rich Text Editor (RTE) Styles plugin dropdown in AEM, you will likely need to customize the behavior of the styles plugin itself. By default, AEM’s Styles plugin allows multiple CSS classes to be applied to selected text, which is why multiple entries can be selected and combined.

There is no explicit configuration in standard AEM documentation to restrict the styles dropdown to single selection via configuration only, but this restriction can be managed by:

1. Customizing the plugin’s JavaScript behavior: You would need to override or extend the default styles plugin so that, when a style is chosen, it removes any previously added style class from the selected text, enforcing single choice.

2. Modify the widget to single select: If you're using CoralUI-based dropdowns in your dialog or plugin UI, ensure you use a widget that supports single selection (like the regular select, not multi-select, or one with multiple attribute disabled).

3. Implement client-side filtering logic: You can implement JavaScript in your component to clear styles classes before adding a new one.

Here is a helpful reference about configuring the Rich Text Editor and customizing plugin behavior: 
https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/con...

No direct OOTB configuration for single-select which means,
The standard configuration nodes and properties (features, styles, etc.) only define what styles are available—not how many can be applied at once:

“Once the Styles plug-in is enabled, the Style drop-down list is displayed in the edit dialog. However, the list is empty as no Styles are configured.”