Custom Plugin for Inline Dialog in AEM RTE: Assistance with Custom Icon Integration

[RahulSi13]

Hi all,

I am currently developing a custom plugin for the AEM Rich Text Editor (RTE), specifically targeting the inline dialog box. I am facing challenges in incorporating a custom icon into the toolbar of the dialog box.

Here is the folder structure for my clientlibs:

/apps/my-project/clientlibs
- /rte-plugin
- /css
- styles.css (contains Coral Icon CSS with the custom icon's image URL)
- /icon
- custom-icon.png
- js
- plugin.js

I have included the image URL for the custom icon in the Coral Icon CSS file and referenced it using the iconCls property in the plugin's JavaScript. Despite these configurations, the custom icon is not rendering in the toolbar of the inline dialog box.

For now, my focus is solely on ensuring the custom icon works for the inline dialog box. I would greatly appreciate guidance on:

• The correct way to include and reference the custom icon in the clientlibs folder.
• Steps to properly configure the iconCls in the plugin's JavaScript to ensure the icon displays in the dialog box.
• Troubleshooting tips to debug why the custom icon might not be appearing.

Thankyou .

[MukeshYadav_ · Accepted solution]

Hi @RahulSi13 ,

We can find list of all the coral icons https://developer.adobe.com/experience-manager/reference-materials/6-4/coral-ui/coralui3/Coral.Icon....

In the plugin we need to register icon with corresponding groupFeature, eg.

var groupFeature = GROUP + "#" + COLOR_PICKER_FEATURE;
tbGenerator.registerIcon(groupFeature, "textColor");

Here textColor is icon html attribute from https://developer.adobe.com/experience-manager/reference-materials/6-4/coral-ui/coralui3/Coral.Icon....

Reference https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-rte-plugin-with-thr...

Thanks

[EstebanBustamante]

Hi, 

Please check this thread: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/icon-picker-plugin-for-ric... 

Hope this helps

[Nikhil-Kumar]

@RahulSi13  - 
Link for sourceedit plugin addition : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-add-sourceedit-to-t...

Link for Custom plugin: https://www.bounteous.com/insights/2022/01/06/custom-rich-text-editor-plugins-adobe-experience-manag...