Remove path in status bar in TinyMCE4

Question

I have just migrated from TinyMCE3 to TinyMCE4 and I wonder how to remove the path in the status bar. But I want to keep my status bar in order to have the resize functionnality.

With TinyMCE3 we can do it with:

tinymce.init({
    ...
    theme_advanced_path : false
});

How can I have the same result with TinyMCE4?

Thanks

score 74 · Answer 1 · answered May 06 '15 at 00:19

74

In TinyMCE 4 you can remove just the path in the statusbar by setting the configuration elementpath to false, like this:

tinymce.init({ elementpath: false });

answered May 06 '15 at 00:19

Beck Johnson

1,201
1
11
11

Works in TinyMCE 5 too, and should be the accepted answer. – AsGoodAsItGets Oct 10 '19 at 08:48

evilReiko · Accepted Answer · 2014-01-10T10:05:15.107

22

This works for me:

.mce-path {/* CSS */
    display: none !important;
}

EDIT:

In TinyMCE4, I don't think there is an official way to do it by passing a parameter to tinymce.init(); to disable the path. You can pass statusbar: false but that will hide the path AND the resize icon, unfortunately!

The answer I gave by using CSS, hides the path but the resize icon stays there. But make sure you have the statusbar: true in the tinymce.init();

edited Jan 10 '14 at 10:05

answered Jan 09 '14 at 14:20

evilReiko

19,501
24
86
102

6

Also `.mce-statusbar { border-width: 0 !important; }` removes the double border at the bottom. – Jaime Gómez Apr 26 '15 at 22:25

score 10 · Answer 3 · answered Jun 19 '13 at 14:25

10

tinymce.init({
    statusbar : false,

answered Jun 19 '13 at 14:25

kcsoft

2,917
19
14

6

Thank, but if I do like this, I lose my status bar and I am unable to resize the TinyMCE block. – ChibiTomo Jun 19 '13 at 15:58

immo · Answer 4 · 2014-04-11T13:53:06.603

The CSS approach works, but is usually applied globally to each editor in the page. The old option of TinyMCE 3 could be applied individually for different editors.

I wanted to keep this flexibility and found the following solution:

a) Define a CSS rule like .myMceNoPath .mce-path{display:none;}

b) For an editor instance which should provide a resize handle without path display, define the following options:

resize: "both", 
init_instance_callback : function (ed) {
    ed.getContainer().className += " myMceNoPath";
}

This dynamically adds a class to the editor element, enabling us to apply the CSS only to the editors specifically marked this way.

Alex Lapin · Answer 5 · 2018-04-17T09:08:19.453

2

Unfortunately this feature is deprecated in TinyMCE 4. But you always can block this visually by CSS. It must look something like this:

.mce-path {
 display: none;
}

edited Apr 17 '18 at 09:08

answered Jul 27 '13 at 21:18

Alex Lapin

51
4

score 2 · Answer 6 · edited May 23 '17 at 10:31

2

tinyMCE.init({
    menubar:false,
    statusbar: false,
        //etc
})

From: Remove menu and status bars in TinyMCE 4

edited May 23 '17 at 10:31

Community

1
1

answered Nov 02 '14 at 18:27

Vasileios Karagkounis

29
3

1

Best answer so far, this actually removes the statusbar – Manuel Di Iorio Jan 21 '19 at 14:46

score 2 · Answer 7 · answered Feb 20 '19 at 13:16

I am using tinyMCE v5. And the following works. In order to hide the Path, pass "elementpath": false in init object and "statusbar": false to hide the full status bar. If you hide the whole status bar then you will also lose your ability to increase or decrease the height.

Dustin Carr · Answer 8 · 2014-04-29T00:02:20.343

One quick solution in TinyMCE 4 is to set the path element's opacity to transparent:

tinymce.init({
    ...
    init_instance_callback: function (editor) {
        $(editor.getContainer()).find(".mce-path").css("opacity", "0");
    }
});

This should hide the path text without otherwise affecting the status bar. I've found that disabling the status bar's visibility through either the init() function or CSS display property also results in a floating word count and resize icon overlapping the scrollbar.

Credit to immo and others for pointing out the callback and CSS concepts. I like this particular (jQuery) solution because it's self-contained and applies only to its parent editor, though variations are possible.

score 1 · Answer 9 · answered Sep 09 '15 at 12:09

1

Setting theme_advanced_statusbar_location to empty string worked for me.

tinyMCE.init({

    theme_advanced_statusbar_location : "",
})

answered Sep 09 '15 at 12:09

Dawn T Cherian

4,968
3
24
35

McNaddy · Answer 10 · 2014-10-14T15:55:18.430

Mine is based on the opacity concept from Dustin Carr above: For TinyMCE 4, I located skin.min.css, searched mce-path-item and right after display:inline-block, I added opacity:0. So it finally is something like display:inline-block;opacity:0; *display...

It's just a quick trick, as Carr says: the element is still there when I click on it, it's just the standard user don't see it.

Hope it helps some one...

EDIT:The same for mce-divider ;)

score 0 · Answer 11 · answered Nov 16 '14 at 12:05

Thanks to @Dustin Carr for his answer. I've extended his answer a little bit , that's what i did , it works fine for me and when user hover cursor over the area of the path it doesn't display cursor at all (with opacity 0 it displays cursor over the path and path remains clickable) .

tinymce.init({

...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("visibility", "hidden");
},

});

HTH

Remove path in status bar in TinyMCE4

11 Answers11