How to hide toolbar with buttons in TinyMCE?

Question

I want to hide the button toolbar in tinymce.

How to do that?

Which "bar" do you mean anyways? I think TinyMCE has a bunch of them. — Matti Virkkunen, Apr 13 '10 at 09:00
the simple bar i just want the textarea, hide the button toolbar (all) — Mercer, Apr 13 '10 at 09:01
Why are you using TinyMCE if you don't want any of the toolbars? — Matti Virkkunen, Apr 13 '10 at 09:02
because i have a pb with accent when i use a simple textarea but when i use a textarea with Tiny is work — Mercer, Apr 13 '10 at 09:05
Using a whole WYSIWYG editor just to avoid some character encoding problems is a silly workaround. How about fixing the normal textarea instead? — Matti Virkkunen, Apr 13 '10 at 09:07
the pb is i using a blob in my database and when i wnt read information the accent is not present i have this charactere : ? — Mercer, Apr 13 '10 at 09:09
Stop using a BLOB type to store text, and sort out your character encoding. I suggest you use Unicode (UTF-8) wherever you can. The reason TinyMCE makes it work is likely because it (stupidly) encodes everything except US-ASCII as HTML entities. — Matti Virkkunen, Apr 13 '10 at 09:10
so how i can store a long text because if i use simple text in my base (Myslq) the mx for a varchar is 255 — Mercer, Apr 13 '10 at 09:11
Use one of the TEXT types: http://dev.mysql.com/doc/refman/5.1/en/blob.html — Matti Virkkunen, Apr 13 '10 at 09:15
i just remove the ui.css of tinymce and the toolbar is not shown.or i guess u can just modify the ui.css that might help — wilsonrufus, Feb 21 '13 at 12:00
Please add a screenshot so we know what you are taling about... — Black, Dec 06 '19 at 08:23

score 28 · Accepted Answer · answered Mar 13 '14 at 19:49

28

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>

answered Mar 13 '14 at 19:49

JasonH

1,221
2
19
19

menubar is not hidding – Afraz Ahmad Aug 01 '19 at 10:21

score 5 · Answer 2 · answered Dec 23 '10 at 19:07

5

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"
 }

answered Dec 23 '10 at 19:07

ablemike

3,384
3
22
21

Where: pdw_toggle_toolbars : "2,3,4" is put the rows you want to hide. – ablemike Dec 23 '10 at 19:20
is it made from javascript or using jquery – Vishal Sharma Mar 18 '13 at 07:52

score 3 · Answer 3 · edited Nov 06 '12 at 09:25

3

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;

edited Nov 06 '12 at 09:25

nanoamp

118
1
9

answered Aug 03 '12 at 07:45

Thariama

50,002
13
138
166

score 2 · Answer 4 · edited Nov 06 '12 at 09:25

2

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.

edited Nov 06 '12 at 09:25

ThiefMaster

310,957
84
592
636

answered Aug 03 '12 at 04:33

Hampus Ahlgren

519
1
5
15

score 2 · Answer 5 · answered Apr 01 '16 at 08:36

2

In tinymce4, inline mode, I use simply:

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

answered Apr 01 '16 at 08:36

S.Petrykowski

21
1

score 1 · Answer 6 · answered Mar 18 '13 at 08:04

1

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

will work for you

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

answered Mar 18 '13 at 08:04

Vishal Sharma

2,773
2
24
36

score 1 · Answer 7 · answered May 23 '13 at 14:11

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 .

score 1 · Answer 8 · answered Sep 07 '16 at 07:42

1

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

answered Sep 07 '16 at 07:42

marcomoser

691
1
4
4

score 1 · Answer 9 · answered Jul 25 '17 at 08:23

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'}
  }
});

How to hide toolbar with buttons in TinyMCE?

9 Answers9

Linked