8

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.

enter image description here

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

$('.mceWrapper iframe').load( function() {
    $(this).contents().find('tr.align').hide();
});
  • IIRC that iframe doesn't have jQuery within it, that may be the problem. – NoBugs Dec 3 '13 at 7:44
  • As this a tinyMCE Plugin afaik there is no way to filter the output. You would need to replace the plugin (tinyMCE Plugin, not WordPress plugin that is) by a custom one. Have a look at a similar post on stackoverflow: Customizing the WP image editing widget – kraftner Feb 18 '14 at 12:56
  • Also it seems as the wpeditimage tinyMCE-Plugin is currently being worked on heavily so you might want to have a look at pending changes in WordPress Make – kraftner Feb 18 '14 at 13:00
2

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

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.

-1

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.

  • This doesn't work as the CSS isn't added to the iframe of the wpeditimage tinyMCE-Plugin but the parent edit screen. – kraftner Feb 18 '14 at 12:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.