Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Need to view color picker in RTE component dialog normal view


Level 1

Hi Team, Currently I am working on a AEM cloud based project. In my project we are currently using a customized text component which had a color picker plugin using which content author is able to use while authoring the text (RTE) component. Currently the color picker is visible only when the RTE dialog is maximized view (refer image-1). But the new requirement is to make the color picker should be visible when the RTE is normal view (refer image-2). Please find the attached screenshot and let me know.


Thanks & best regards


1 Accepted Solution


Correct answer by
Community Advisor
3 Replies


Correct answer by
Community Advisor

You need to add plugin in the inline section as well



Arun Patidar


Level 10

Hi @TapasaranjanSa ,

To make the color picker in your RTE (Rich Text Editor) component dialog visible in the normal view (non-maximized view), you need to customize the RTE configuration in your AEM project. This involves configuring the RTE to include the color picker plugin and ensuring that the toolbar displays the color picker button even in the normal view.

Here are the steps to achieve this:

1. Configure RTE Plugins

First, ensure that the color picker plugin is correctly configured in your RTE component.

Example of cq:inplaceEditing and rtePlugins Configuration:


  "jcr:primaryType": "nt:unstructured",
  "text": {
    "jcr:primaryType": "cq:Widget",
    "xtype": "richtext",
    "fieldLabel": "Text",
    "name": "./text",
    "rtePlugins": {
      "color": {
        "features": ["forecolor", "backcolor"]
    "toolbar": [
      ["bold", "italic", "underline"],
      ["forecolor", "backcolor"],
      ["justifyleft", "justifycenter", "justifyright"],
      ["numberedlist", "bulletedlist"],
      ["link", "unlink"]


2. Add Color Picker to the Toolbar

Ensure that the color picker buttons (forecolor and backcolor) are added to the toolbar configuration for both the full screen and normal view.

3. Customize the Dialog Configuration

Update the dialog configuration to make sure that the color picker is always visible in the normal view. This involves editing the dialog XML file of your RTE component.

Example Dialog Configuration in XML:


<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:title="Text Component"

        <items jcr:primaryType="nt:unstructured">
                <rtePlugins jcr:primaryType="nt:unstructured">
                    <color jcr:primaryType="nt:unstructured" features="[forecolor, backcolor]"/>
                <toolbar jcr:primaryType="nt:unstructured">
                    <full jcr:primaryType="nt:unstructured" toolbar="[format, bold, italic, underline, subscript, superscript, justifyleft, justifycenter, justifyright, justifyfull, forecolor, backcolor, ordered, unordered, outdent, indent, horizontalrule, insertAnchor, link, unlink, anchor]"/>
                    <normal jcr:primaryType="nt:unstructured" toolbar="[format, bold, italic, underline, forecolor, backcolor]"/>


4. Ensure CSS and JS Files Are Properly Loaded

Make sure the necessary CSS and JavaScript files for the color picker are properly included in your project.

5. Build and Deploy

Build your project and deploy the changes to your AEM environment.


mvn clean install -PautoInstallPackage


By configuring the rtePlugins and ensuring that the toolbar includes the color picker options for both the full screen and normal views, you can make the color picker visible in the normal view of your RTE component dialog. This setup ensures that the color picker is accessible to content authors without the need to maximize the RTE dialog.