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:primaryType="nt:unstructured"
jcr:title="Text Component"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext">
<rtePlugins jcr:primaryType="nt:unstructured">
<color jcr:primaryType="nt:unstructured" features="[forecolor, backcolor]"/>
</rtePlugins>
<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]"/>
</toolbar>
</text>
</items>
</content>
</jcr:root>
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.
