How to modify image editor dialog options on WordPress?

Question

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 Image Editor dialog.

I've successfully added a filter to the tiny_mce_before_init action hook to remove alignment buttons from the TinyMCE text editor, but am unsure how to do the same with the image editor.

I've tried a jQuery hack, but it doesn't seem to take:

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

Answer 1

Looking at it in detail it seems that you can't alter the image editor just in some details. The only thing you can do is to replace the image editor with a slightly modified copy. I'll explain shortly how this can be done.

But before that a word of warning. The Image Editor is currently (2/2014) worked on, so this solution probably won't work from the next WordPress version on without further modification.

One last note: It would proably better if you did put this in a Plugin and not in your theme. Anyway, to make this answer shorter I explain how to put this in your theme.

1. Remove default Image Editor

add_filter( 'tiny_mce_plugins', 'remove_wpeditimage', 10, 2 );

function remove_wpeditimage($plugins){
    if(($key = array_search('wpeditimage', $plugins)) !== false) {
        unset($plugins[$key]);
    }
    if(($key = array_search('teeny_mce_plugins', $plugins)) !== false) {
        unset($plugins[$key]);
    }
    return $plugins;
}

2. Copy and change the Image Editor

Copy wp-includes/js/tinymce/plugins/wpeditimage to your theme folder.

Alter it the way you like. The easiest way to get rid of the alignment options would be to change line 55 from

<tr class="align">

to

<tr class="align" style="display:none;">

3. Add the altered Image Editor

add_filter('mce_external_plugins', 'add_customized_wpeditimage');

function add_customized_wpeditimage($plugins) {
    $plugins[ 'wpeditimage' ] = get_template_directory_uri() . '/wpeditimage/editor_plugin.js';
    return $plugins;
}

Answer 2

The function you're looking for, to add CSS to the MCE editor is called add_editor_style. I had a go at getting this to work but a quick five minute hack didn't work for me. According to the codex that is the right way of doing it though.

Answer 3

You can just hide it with your CSS. If your theme has a css file for your admin dashboard (for custom forms etc) then just add this to that file;

#img-edit tr.align { display:none; }

If your theme doesn't have a CSS file for the admin dashboard then you can put this in your themes' functions.php file instead;

add_action( 'admin_head', 'so4513579_hide-img-alignment' );

function so4513579_hide-img-alignment() {
    echo "<style> #img-edit tr.align { display:none; } </style>";
}

Note the alignment value will be still be saved as whatever it was prior to editing.