December 31, 2020
Estimated Post Reading Time ~

Multiple custom plugins in TouchUI RTE in AEM not working

I tried adding two custom plugins in TouchUI RTE (Image plugin and color-picker plugin ). if I add either of the one plugin's to RTE, that works fine but when having both together, only the color picker plugin appears.

Plugin links: http://experience-aem.blogspot.com/2015/01/aem-6-sp1-touchui-richtext-editor-color-picker-plugin.html

http://experience-aem.blogspot.com/2015/09/aem-61-touch-ui-rich-text-editor-rte-browse-insert-image.html

I need both the plugins in RTE, Could you please suggest an appropriate approach?

Solution:
The components don't work together because components are overriding one to another: CUI.rte.ui.ToolkitRegistry.register("cui", ExperienceAEM.ToolkitImpl);

To achieve what you want:
  • - Remove the custom EAEMCuiToolbarBuilder and EAEMDialogManager classes, instead extending CUI.rte.ui.cui.CuiToolbarBuilder and CUI.rte.ui.cui.CuiDialogManager directly e.g. CUI.rte.ui.cui.CuiDialogManager = new Class({ extend: CUI.rte.ui.cui.CuiDialogManager, ... });
  • - Remove the EAEMToolkitImpl class and the line CUI.rte.ui.ToolkitRegistry.register("cui", EAEMToolkitImpl); as it seems no longer necessary
  • - Place the color picker and image insert plugins into different GROUP names so that they don't collide when CUI.rte.plugins.PluginRegistry.register(GROUP, EAEMColorPickerPlugin); is called.
  • - Change calls of this.superClass._getUISettings(options) and this.superClass.create.call(this, dialogId, config) to this.inherited(arguments)
Reference: http://experience-aem.blogspot.com.uy/2015/09/aem-61-touch-ui-rich-text-editor-rte-browse-insert-image.html


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.