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

Deposit

Answer 1

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();

Stuck

Also .mce-statusbar { border-width: 0 !important; } removes the double border at the bottom. – Catchweight

Answer 2

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

Monofilament

Works in TinyMCE 5 too, and should be the accepted answer. – Kelwunn

Answer 3

tinymce.init({
    statusbar : false,

Verdict

Thank, but if I do like this, I lose my status bar and I am unable to resize the TinyMCE block. – Deposit

Answer 4

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.

Lunge

Answer 5

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

Kallman

Answer 6

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

From: Remove menu and status bars in TinyMCE 4

Marienbad

Best answer so far, this actually removes the statusbar – Acord

Answer 7

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.

Bennion

Answer 8

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.

Dionedionis

Answer 9

Setting theme_advanced_statusbar_location to empty string worked for me.

tinyMCE.init({

    theme_advanced_statusbar_location : "",
})

Hersey

Answer 10

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

Coventry

Answer 11

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

Derouen