Level 2

Solved

RTE Plugin

Forum|Forum|1 month ago
April 17, 2026
4 replies
100 views

Can you give the solution to customize and create the RTE plugin for external link builder experience in RTE for AEM to add the anchor tag and have data-link-attrs for modal popup inside the a tag

Experience Manager

Best answer by PGURUKRISHNA

Hey @tiru35 , Custom RTE plugin for AEM that adds an "External Link" toolbar button. When clicked, it opens a Coral UI dialog where authors enter URL, link text, and a

data-link-attrs

value. On apply, it inserts

<a href="..." data-link-attrs="modal">text</a>

into the RTE content, enabling front-end modal popup behavior.

Solution

3 files under

ui.apps/.../apps/wknd/clientlibs/clientlib-rte-plugins/

:

1.

.content.xml

— Registers clientlib with

cq.authoring.dialog

category

2.

js/ExternalLinkPlugin.js

— Registers plugin

externallink

with feature

externalLinkModal

:

Adds toolbar button with link icon
Opens Coral dialog with fields: Link Text, URL, data-link-attrs

Inserts

<a href="..." data-link-attrs="modal">

via

inserthtml

command

3. RTE Config — Enable in policy/dialog:

Add

<externallink features="externalLinkModal"/>

under

rtePlugins

Add
```
#externallink-externalLinkModal
```
to toolbar arrays

Output HTML:

<a href="https://example.com" data-link-attrs="modal">Click here</a>

lavishvasuja

Level 4

@tiru35

This isn’t supported out of the box in AEM RTE. The default link plugin doesn’t allow adding custom attributes like data-* on anchor tags.

To achieve this, it would require a custom RTE plugin/extension, for example:

Extend or enhance the link plugin to provide a custom authoring UI (for modal/external link configuration)
Capture the required values and apply them to the <a> tag (e.g., data-link-attrs)
Ensure the custom attributes are allowed via XSS configuration
Register and configure the plugin within the component’s RTE setup

Overall, this is a custom authoring-layer enhancement rather than an OOTB capability.

T

tiru35Author

Level 2

Yes, I am trying to build the custom RTE plugin for external link and not extending the OOTB hyperlink plugin with following all the above steps you have mentioned. Created a separate dialog for the custom fields and the logic to load from the clientlibs using coralui3 categories along with HTML5 rules for serialization and added the attributes to antisamy policy for xss configuration, but the custom plugin is not showing up on the RTE after adding that new plugin to RTE. It looks like clientlibs are loading but the plugin is not registering.

G

gvaem

Level 3

Try this solution. It helped me to cutomize the dialog

https://medium.com/@lathamanivannan/building-the-perfect-rte-in-aem-step-by-step-with-plugin-exclusion-ui-settings-toolbar-7837f8b9d4a1

PGURUKRISHNAAccepted solution

Level 5

Hey @tiru35 , Custom RTE plugin for AEM that adds an "External Link" toolbar button. When clicked, it opens a Coral UI dialog where authors enter URL, link text, and a

data-link-attrs

value. On apply, it inserts

<a href="..." data-link-attrs="modal">text</a>

into the RTE content, enabling front-end modal popup behavior.

Solution

3 files under

ui.apps/.../apps/wknd/clientlibs/clientlib-rte-plugins/

:

1.

.content.xml

— Registers clientlib with

cq.authoring.dialog

Solution

Solution

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded