how to remove icons from tinyMCE Editor?

Question

I just started using TinyMCE as a WYSIWYG editor, I'm wondering if someone sees my question have used this nice editor can help me, here is my script:

<script type="text/javascript">
tinyMCE.init({
        mode : "exact",
         elements : "comment",
        theme : "advanced",
        plugins : "emotions,spellchecker,advhr,insertdatetime,preview",

        // Theme options - button# indicated the row# only
        theme_advanced_buttons : "undo,redo,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,|,forecolor,backcolor,link,unlink,image,charmap,emotions",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",        
        skin : "o2k7",
        skin_variant : "silver"
});
</script>

but I get others icons, really don't know how to remove it, such as : 'sub,'sup,'HTML editor', .. Thanks in advance, My regards.

Answer 1

You need to define the buttons for all 3 rows of the toolbar, even if you don't want buttons in them. Example:

theme_advanced_buttons1 : "undo,redo,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,|,forecolor,backcolor,link,unlink,image,charmap,emotions",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",

Reference: http://tinymce.moxiecode.com/wiki.php/Configuration:theme_advanced_buttons_1_n

Otherwise, I believe you will get some default behavior. Give that a try and see if it helps.

Answer 2

theme_advanced_buttons1 does not worked for me so you can try this

$(window).load(function(){
        $('#mce_14-body').hide();
        $('#mce_28-body').hide();
        $('#mce_20-body').hide();
      });

id selector can point to panel or button etc.