component dialog options - is it possible to always show the richtext menu options? | Community
Skip to main content
C
chebwin
Level 2
July 4, 2023
Solved

component dialog options - is it possible to always show the richtext menu options?

  • July 4, 2023
  • 3 replies
  • 1331 views

There are a few scenarios where you can highlight text and the richtext menu options disappear.

 

Aside from web-accessibility concerns of showing and hiding page features there's actually a bug where if you highlight a word (in order to say, make it a link) and let go in a certain area (within the dialog but outside of the text area) the richtext options disappear s you can't make it a link.

 

Hiding them seems to be just an exercise in hiding the dialog complexity but in doing so can make entry more complex.

 

Attached zipped video example of issue.

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

Hello @chebwin, Here you go. This solution should keep the RTE menu options always "visible".  

Of course its is a customization 🙂

Note: This code is tested on AEM 6.5 SP 11 

 

I hope I did not introduce any typos. If you find any please point it out to me and I'll fix them in my post.

 

At a high level 2 things are necessary to achieve this,

1. Create a client library with a CSS and a JS custom script (code below)

2. Hook this client library into the extraClientlibs field.

 

The CSS:

 

.cq-dialog-content .rte-ui .rte-toolbar { visibility: visible!important; }

 

 

The JS

 

(function (document, $) { $(document).on("foundation-contentloaded", function(e) { setTimeout(function(e){ $(".cq-dialog-content .rte-ui .rte-toolbar .rte-toolbar-item").addClass("is-disabled"); }, 1000); }); })(document,Granite.$);

 

 

Link it to the component:

extraClientlibs="[<your-custom-clientlib-name>]"

 

 

thanks,

Preetpal

3 replies

Preetpal_Bindra
Community Advisor
Preetpal_BindraCommunity Advisor
Community Advisor
July 6, 2023

Yes, we had a similar ask by the business team. Let me dig up that code and be right back with the implementation.

    Preetpal_Bindra
    Community Advisor
    Preetpal_BindraCommunity AdvisorAccepted solution
    Community Advisor
    July 6, 2023

    Hello @chebwin, Here you go. This solution should keep the RTE menu options always "visible".  

    Of course its is a customization 🙂

    Note: This code is tested on AEM 6.5 SP 11 

     

    I hope I did not introduce any typos. If you find any please point it out to me and I'll fix them in my post.

     

    At a high level 2 things are necessary to achieve this,

    1. Create a client library with a CSS and a JS custom script (code below)

    2. Hook this client library into the extraClientlibs field.

     

    The CSS:

     

    .cq-dialog-content .rte-ui .rte-toolbar { visibility: visible!important; }

     

     

    The JS

     

    (function (document, $) { $(document).on("foundation-contentloaded", function(e) { setTimeout(function(e){ $(".cq-dialog-content .rte-ui .rte-toolbar .rte-toolbar-item").addClass("is-disabled"); }, 1000); }); })(document,Granite.$);

     

     

    Link it to the component:

    extraClientlibs="[<your-custom-clientlib-name>]"

     

     

    thanks,

    Preetpal

      C
      chebwinAuthor
      Level 2
      July 7, 2023

      Thanks Preetpal! Tested this locally and it works fine 👍

       

      Will need to test it's production ready for SP 17; a shame there's not a built in fix but I'm sure we'll go for this or something very similar

        Terms & ConditionsAccessibility statement

        Loading footer...