1 Reply Latest reply on Jun 5, 2013 3:51 AM by PuzanovsP

    Adding custom buttons to the Rich Text Editor in CQ

    PuzanovsP Level 4



      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 ?




        • 1. Re: Adding custom buttons to the Rich Text Editor in CQ
          PuzanovsP Level 4

          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


                                      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))