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
Tapas
Solved! Go to Solution.
Views
Replies
Total Likes
You need to add plugin in the inline section as well
You need to add plugin in the inline section as well
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:
First, ensure that the color picker plugin is correctly configured in your RTE component.
{
"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"]
]
}
}
Ensure that the color picker buttons (forecolor and backcolor) are added to the toolbar configuration for both the full screen and normal view.
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.
<?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>
Make sure the necessary CSS and JavaScript files for the color picker are properly included in your project.
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.
Views
Likes
Replies
Views
Likes
Replies