Extend Rich Text Editor Toolbar in new Content fragment Editor

[PavelKu3]

Hi guys, I have a task to extend RTE toolbar with some custom button on AEMaaCS in new Content fragment Editor

I went through the Adobe documents like these
https://developer.adobe.com/uix/docs/services/aem-cf-editor/api/rte-toolbar/
https://experienceleague.adobe.com/en/docs/experience-manager-learn/cloud-service/developing/extensi...

But there are just a simple examples of simple button. I could not find any API documentation with all available options. For instance, I have no idea how to make the button showing some dropdown with some predefined options on click instead of just inserting or replacing selected content.

[SantoshSai]

Hi @PavelKu3,

1. Adobe’s Official “Custom Button” Example (Insert Content Only)

Adobe’s own example shows how to add a basic custom button (InsertTip) using the rte extension—but it only inserts content and doesn’t provide a dropdown UI. This is a good starting point for any custom button implementation, but falls short when it comes to dropdowns.

2. AEM UIX GitHub – Dropdown-Enabled Extension

The adobe/aem-uix-examples GitHub repo includes several content-fragment-editor extensions. Notably:

• cf-editor-form-field-dropdown-sample

• cf-editor-rte-toolbar-configurable-buttons

• cf-editor-custom-rte-field
  … and critically:

• cf-editor-rte-toolbar-button-sample

These repositories contain working extensions for both form-field dropdowns and RTE toolbar extensions—some of which include dropdown behavior, not just simple insert buttons.

You can clone the repo, explore the examples, and adapt the toolbar-button sample to include a dropdown instead of a basic button.

3. Custom RTE Plugins in Classic AEM

While older (AEM 6.x) examples like Exadel’s “footnote” plugin or the AEM Lab “style picker” use classic RTE plugin patterns (via cq:ClientLibrary and rtePlugins), they demonstrate how to:

• Launch a popover dialog with a list of options

• Retrieve the selected value and insert formatted HTML into the editor
  This pattern can inform your implementation within the new CFE’s UI extension.

Recommended Approach for Dropdown Button

1. Clone the cf-editor-rte-toolbar-button-sample from the UIX repo.

2. Modify the onClick handler to instead open a dropdown or popover with predefined options—similar to how classic plugins do.

3. Use InsertContent or ReplaceContent instruction based on the user's selection.

4. Style the dropdown/panel and integrate with Coral UI, Spectrum icons, etc.

[PavelKu3]

Existed examples do not make it clear, unfortunately.