How to hide an element in WordPress’s TinyMCE image editor dialog with jQuery/Javascript?

1 Views

I am trying to hide the Alignment radio buttons for images uploaded to the post content area, but can’t figure out how to add a custom CSS or JS file to the WordPress Image Editor dialog.

enter image description here

Read More

It looks like the dialog box is a TinyMCEPopup which is rendered by an HTML file, and I can’t figure out how to manipulate anything in the .mceWrapper with jQuery. I’m currently hooking into admin_enqueue_scripts to load the JS below: 

    $('.mceWrapper iframe').load( function() {
        $(this).contents().find('tr.align').hide();
    });
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. I haven’t checked on wordpress this image plugin , but let me show you how to handle any elements in pop up window of tinymce

    all windows pop-up are containing window instances which are added in windows variable of tinymce.windowManager namespace 

    tinyMCE.activeEditor.windowManager.windows

    will give you all windows that are popped up..in your case only one window is there so 

    tinyMCE.activeEditor.windowManager.windows[0].getEl(0)

    , getEl method gives you main element in popup window

    wire up this element with jquery , using find method find element you want and hide it.

    for e.g. go to tinymce.com => open any window like insert video or insert image and run this line in console it will hide all container element..

    $(tinyMCE.activeEditor.windowManager.windows[0].getEl(0))
.find('div.mce-container-body').hide();

    hope that helps