Customizing TinyMCE 4.0

Many of the TinyMCE settings have changed in version 4.0. There is a new default theme: Modern, and all the UI settings for the former Advanced theme (theme_advanced...) are deprecated.

One often used setting was theme_advanced_blockformats. It was renamed to block_formats and keeps the same formatting. To specify a different set of elements for the ‘blockformats’ drop-down (second toolbar row in the WordPress Visual editor), you can set a string of name=value pairs separated by a semicolon in the initialization object:

block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3"

Another handy setting: theme_advanced_styles doesn’t exist any more. However there is a more powerful version: style_formats. Now it can replace or add items to the new “Formats” menu.The value is an array of objects each containing a name that is displayed as sub-menu and several settings: a CSS class name or an inline style, and optionally the wrapper element where the class or inline style will be set:

toolbar3: 'styleselect',
style_formats_merge: true,
style_formats: { name: 'Custom styles', [
  {title: 'Red bold text', inline: 'b', styles: {color: '#ff0000'}},
  {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
  {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
  {title: 'Example 1', inline: 'span', classes: 'example1'},
  {title: 'Example 2', inline: 'span', classes: 'example2'}
]}

The above code will add another sub-menu to “Formats” without replacing the default menu items. There is more information and an example on the TinyMCE website.

14 thoughts on “Customizing TinyMCE 4.0”

I love TinyMCE 4, but lot of people are marking about it because all of there button plugins broke their website.

Yep – I am one of them. Insert/edit link (very important to my daily pieces) is broken and I can’t fix it.

Mike on April 20, 2014 at 10:54 pm said:

Agree with you Andy
The edit link is one of the most important functions for my clients and myself. Most of my client’s don’t want to / don’t know how to add basic essential markup in HTML (e.g. rel=”nofollow”, rel=”bookmark” etc).
The good news is – The developer of WP Edit (and now defunct Ultimate Tiny MCE) is working on coding a replacement link edit button for TinyMCE 4.
- Andy Graziano on April 21, 2014 at 4:24 am said:
  
  Where did you see that? I went to the plug-in page and checked the forums. Didn’t see anything about it.
  
  Thanks
- Mike on April 21, 2014 at 5:20 am said:
  
  Andy – see this thread on plugin support http://wordpress.org/support/topic/advanced-link-button?replies=6
  Last entry by Josh says “I’m going to have to code this from scratch”
  He’s pretty good about doing things he says he will do, so it may take a while, but I’m sure that button will return.
  In the meantime maybe a developer will release a plugin to get rid of “4” and revert back to “3”. In my opinion that’s the best option anyway. TinyMCE 4 sucks.
- Andy Graziano on April 21, 2014 at 5:34 am said:
  
  Thanks Mike. I cannot believe nobody even in the WordPress forums can help with this issue. I have troubleshooted to the max. De-activate all plug-ins, clear cache, change themes. Even went as far as to have the theme developer (Megnet) take the time out of his schedule to check my site to make sure it was not the theme. Baffling to me as everything else works fine.