Sunday, March 31, 2013

Remove buttons from Rich Text Area

Remove Buttons from Rich text area

We can find so many blogs to add buttons in Rich Text Area, but when I googled for removing particular button from Rich Text Area I found that there is no one who had posted or knows this.

So here it comes, the solution:
  • Basically I am going to use is JavaScript
  • Using this I am gonna hide those button elements from RTA
  • As you can see the JS, I am calling the function onLoad and searching for element 'cke_9'. It's nothing  but the HTML element Id of button
  • If on load also we gets the element as null, we will call this function after 10 Seconds until we find the button/RTA
  • Then, once we get that button we can make particular button invisible.

Include this JavaScript in your Visualforce page at bottom:
  window.onload=function(){  
   setTimeout(  
     function removeToolbar(){  
       if(document.getElementById('cke_9') != null)  
       {  
         //hideEle('cke_6'); //Undo and Redo  
         hideEle('cke_9'); //Bold, Italic, Underline, StrikeThrough  
         hideEle('cke_14'); //Link, Image  
         hideEle('cke_17'); //Allign Buttons(Left, Center, Right)  
         hideEle('cke_21'); //Bullet and indent buttons  
       }  
       else  
         setTimeout(removeToolbar, 1000);  
     }  
   , 1000);  
 };  
 function hideEle(eleId)  
 {  
      if(document.getElementById(eleId) != null )  
          document.getElementById(eleId).style.display = 'none';  
 }  




  • Someone must be confused about how to get button Ids?
    • If we look at attached screenshot, can easily identify the Id of button we want to remove.
    • Basically there are 5 group of buttons, each group having an distinct Id.
    • If you want to remove particular button just add its number to its group Id.
    • For example:
      • To remove only "Underline" button from second group:
      • We first take its group Id = "cke_9" and then its number in a group 3, so 9 + 3 = 12 so,
        we will pass the "cke_12" to hideEle function



Guys, let me know your feedback on this. As it was much appreciated by end user who were thinking this ain't possible.