Adding custom buttons to the Rich Text Editor in CQ

Question

Hi,
I have added custom buttons to the rich text editor in order to allow our editors to add specific content, such as popovers, custom videos and other data necessary data.
I have successfully modifed the Rich Text editor so, that it includes the custom buttons in the actions panel.
I have also managed to make the buttons work and include the data where necessary, when user highlights the text and clicks on a certain button.
The last bit I am struggling with, is the visual feedback we give to the users when this text has associated action with it.
E.g. when we select this text and make it bold when we click on the word B the button B becomes highlighted in the actions panel, later when we continue typing our text and click again on "bold" the letter B becomes highlighted again.
Is there any button related callback/method I could overwrite to add this functionality and make my button highlighted ?
Thanks,
Puzanovs

Answer 1

After lot's of thinking found a solution....
Essentially the first step is to extend the CQ.form.rte.plugins.Plugin in your custom button.
Then during the UI initialisation we create our "custom"
var pressButton = new ui.TbElement("press-button", this, true,this.getTooltip("press-button")); // Essential extend of the button
setInterval(function() {
                 if(window.jQuery) {
                     window.jQuery(document).ready(function () {
                         window.jQuery(".x-edit-glossary-insert").css({width:45,"background-image":"none"}); // Ignore the background
                         window.jQuery(".x-edit-glossary-insert").text("Press Button"); // Set the name
                        $(document).on({
                            mouseenter: function(){
                              window.jQuery(".x-edit-glossary-insert").html("<b>Press Button</b>"); // Set the name bold                        
                            mouseleave: function(){                       
                           window.jQuery(".x-edit-glossary-insert").html("Press Button"); // Set the name normal
                         }}, '.press-button');
             }, 100);
tbGenerator.addElement("press-button", plg.Plugin.SORT_LISTS, pressButton, 10); // element is inserted
Every time the element is inserted I add the following html
<span class="press-button">Test peter</span>
Now, every time in the editor, the content editor mouse overs the custom button it is higlighted in the RTE))