How to hide toolbar with buttons in TinyMCE?

I want to hid开发者_JS百科e the button toolbar in tinymce.

How to do that?

Using tinyMCE 4 you can set the following in the tinymce init:

toolbar: false

Here is a full blown example of the init if you want a clean editor with no options:

<script type="text/javascript">
    tinymce.init({
        menubar: false,
        statusbar: false,
        toolbar: false
    });
</script>

There is a plugin that will do this either from a link outside of the editor or from the toolbar itself.

http://www.neele.name/pdw_toggle_toolbars/

Download and extract to your /tiny_mce/plugins/ folder

Then add:

 $('textarea.tinymce').tinymce({
    plugins : "pdw,your other plugins ... "
    // All of your other configurations
    theme_advanced_buttons1 : "pdw_toggle,bold,italic,underline and the rest...
    // Add PDW
    pdw_toggle_on : 1,
    pdw_toggle_toolbars : "2,3,4"
 }

If ed is a reference to your tinymce editor instance, you may use the following jQuery snippet to hide the toolbar:

$('#'+ed.id+'_toolbargroup').parent().css('display','none');

use

$('#'+ed.id+'_toolbargroup').parent().css('display','block')

to get it back;

A quick and dirty fix would be to simply hide it through CSS

#my_textarea_id_tbl tr.mceFirst { display:none; }

If its just for visual reasons this might be enough.

In tinymce4, inline mode, I use simply:

tinymce.EditorManager.activeEditor.getElement().blur();

$(".mceToolbar:eq(1)").hide();

will work for you

replace eq(1) with your button container toolbar e.g. eq(2),eq(3),eq(4)..

if you do an inspection on you tree DOM , you will find :

<a id="tinyelement_external_close" href="javascript:;" class="mceExternalClose"></a>

So add Jquery instruction to have inner HTML as following

$('a#tinyelement_external_close').html('Close')

You will have :

<a id="tinyelement_external_close" href="javascript:;" class="mceExternalClose">Close</a>

Refresh you page you find close link at top-right of toolbar. Click on it . Toolbar become hidden .

simple, use theme: 'advanced', theme_advanced_statusbar_location : 'none',

we can hide the cut , copy , paste in menu :

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    file: {title: 'File', items: 'newdocument'},
    edit: {title: 'Edit', items: 'undo redo | selectall'}, // | cut copy paste pastetext we can remove it because it won't work
    insert: {title: 'Insert', items: 'link media | template hr'},
    view: {title: 'View', items: 'visualaid'},
    format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
    table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
    tools: {title: 'Tools', items: 'spellchecker code'}
  }
});