Need to view color picker in RTE component dialog normal view | Community
Skip to main content
T
TapasaranjanSa
May 31, 2024
Solved

Need to view color picker in RTE component dialog normal view

  • May 31, 2024
  • 2 replies
  • 1309 views

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                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
May 31, 2024

You need to add plugin in the inline section as well

 

https://github.com/arunpatidar02/aemaacs-aemlab/blob/e31fc62bfd147e56ecaca740c6e2739c66c75f75/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/concept/components/rte-text/_cq_dialog/.content.xml#L134 

Arun Patidar
    gkalyan
    Community Advisor and Adobe Champion
    gkalyanCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    May 31, 2024

    @tapasaranjansa 

     

    @arunpatidar solution works as I have used this one of my earlier projects.

      HrishikeshKagne
      Community Advisor
      HrishikeshKagneCommunity Advisor
      Community Advisor
      June 2, 2024

      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.

      Hrishikesh Kagane
        Terms & ConditionsAccessibility statement

        Loading footer...