Hi @javed25 ,
You're using a plugin from Experience AEM (2017) to integrate a color picker into the AEM RTE. The plugin works to an extent:
- The HTML for the popup is rendering.
- But the color picker popup is blank with display: none applied.
This usually indicates that the Coral UI popover component (used internally by the color picker) isn’t being activated or shown properly, often due to:
- Missing JavaScript event listeners to open the dialog.
- Coral component initialization not triggering (especially in dynamic RTE contexts).
- Style conflicts or permissions.
Is It Supported in AEM 6.5 / AEMaaCS?
AEM 6.5: Yes, it can work, but the Experience AEM plugin might require modifications to align with newer CoralUI versions and RTE behavior.
AEMaaCS: You can implement custom RTE plugins, but Adobe strongly recommends using the supported plugins and Coral components via client libraries. Also, cloud environments enforce strict clientlib loading and CSP rules, so older approaches often break.
Try below steps:
1. Fix display: none Issue
Make sure you're manually initializing the Coral.ColorPicker component. Add something like this in your plugin's execute method after DOM insert:
Coral.commons.ready(colorPickerEl, function() {
colorPickerEl.show(); // or trigger it via JS if it’s inside a popover
});
Also check if you're using Coral.Popover or Coral.Dialog, and manually show it like:
popover.showAt(triggerElement);
If you see display: none and the dialog isn’t shown, the JS likely hasn’t called .show() or the attachedCallback of the Coral component hasn't run.
2. Correct Clientlib Category and Dependencies
Ensure the plugin is:
- Part of an allowed clientlib (categories="[cq.authoring.dialog, rte.coralui3]")
- Depends on Coral 3 libraries
<clientlib categories="rte.colorpicker" dependencies="[cq.authoring.dialog, rte.coralui3]">
3. Use Coral Color Picker in Plugin
Here's a modern example snippet to add a Coral color picker in RTE:
var colorPicker = new Coral.ColorPicker();
colorPicker.value = "#ff0000"; // default
colorPicker.variant = "swatches"; // or "default"
colorPicker.on("change", function(event) {
var color = event.detail.value;
// Apply color to selected text
});
Wrap it in a Coral.Popover if needed and attach it relative to the RTE toolbar button.
4. Register the Plugin Properly
Update your rtePlugins in cq:editConfig:
"rtePlugins": {
"colorPicker": {
"features": "*"
}
}
5. For AEMaaCS
If you're migrating to AEM as a Cloud Service:
Avoid old-school DOM manipulation.
Stick to modular JS, OAK index updates, and properly encapsulated clientlibs.
Bundle JS with ES6 modules or webpack, and test via local SDK and Cloud Manager.
Adobe also now encourages use of Content Fragment RTE extensions via Editor JS plugins.
Regards,
Amit
