Change TinyMCE Block Format Labels

Question

For the sake of my site editors, I'm trying to rename the Headings in the TinyMCE dropdown.

I looked into filtering options but came up totally empty.

I've also tried a javascript solution but haven't gotten anywhere with that.

When I run jQuery('#mce_4 a').text('Heading'); in the browser console, it works like a charm, yet when I put it into an javascript file and put it in the .load() function nothing happens. (The file itself is fine as it's running other functions already.)

If I run console.log(jQuery('#mce_4 a')); in my file, it comes up empty as if there isn't any DOM object matching that selector. The TinyMCE editor buttons are not in an iframe themselves, so that doesn't seem to be the issue either.

I would be thrilled with a PHP or JS solution.

Answer 1

I would use the hook tiny_mce_before_init :

function wpse_106063_tinymce($arr){
$arr['theme_advanced_blockformats'] = 'h1,h2,h3,h4';

$style_formats = array(
    array('title' => 'title', 'block' => 'h1')),
// etc
);
$arr['style_formats'] = json_encode( $style_formats );


return $arr;
}
add_filter('tiny_mce_before_init', 'wpse_106063_tinymce');

Hope it helps.

EDIT: add something that should work, not tested. source