Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

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

Avatar

Level 2

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.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

Spoiler
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

View solution in original post

4 Replies

Avatar

Community Advisor

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

Avatar

Correct answer by
Community Advisor

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

Spoiler
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

Avatar

Level 2

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