Modify the TinyMCE 4.0 editor in WordPress 3.9+

Wednesday, April 16th, 2014

WordPress 3.9 adds a bunch of new features including an upgrade to the editor: TinyMCE! Unfortunatly, if you modified the buttons/contorls in the editor, those changes are lost. It took me a while to find the answer, so I wanted to share.

Screen Shot 2014-04-16 at 4.51.30 PMWhy would you modify the editor controls?

Lots of reasons:

  1. To remove unnecessary buttons that allow editors to do evil things (Underline? Full Justify?)
  2. To limit the headings (H1 and H2 are created automatically in our template)
  3. To add new styles!

How did it work before?

I won’t go into all the details (since it no longer works anyway), but …

  • The hook: add_filter(‘tiny_mce_before_init’, ‘function_to_do_something’);
  • To limit formats: $a[‘theme_advanced_blockformats’] = ‘p,h3,h4,h5,h6,address,pre,code’;
  • To disable buttons: $a[‘theme_advanced_disable’] = ‘forecolor,indent,outdent,wp_help,wp_more’;

How to do it in 3.9+

In WP 3.9 the same hook can be used, but you have to modify things in a different way. For instance, you need to edit the rows ‘toolbar2’ and ‘toolbar2’ separately. You also can’t seem to modify ‘blockformats’ directly.

The best example that I have found is mrwweb’s mrw-tinymce-mods.php. In it, he:

  • Replaces the 2 button rows using the hooks: “mce_buttons” and “mce_buttons_2”
  • This includes removing the “formatselect” select and adding “styleselect” which can be edited
  • “styleselect” is then built to include the headings, plus other styles!

One thing to watch out for

When setting up the buttons, the names supplied by TinyMCE won’t work. I had to do a var_dump to figure it out. Here is the default sets:

$in[‘theme_advanced_buttons1’] =

  • “bold”
  • “italic”
  • “strikethrough”
  • “bullist”
  • “numlist”
  • “blockquote”
  • “hr”
  • “alignleft”
  • “aligncenter”
  • “alignright”
  • “link”
  • “unlink”
  • “wp_more”
  • “spellchecker”
  • “fullscreen”
  • “wp_adv”

$in[‘theme_advanced_buttons2’]=

  • “formatselect”
  • “underline”
  • “alignjustify”
  • “forecolor”
  • “pastetext”
  • “removeformat”
  • “charmap”
  • “outdent”
  • “indent”
  • “undo”
  • “redo”,
  • “wp_help”

 

Leave a Reply

You know you want to...