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

    • 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 – 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.

      • 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.

  1. Pingback: Andrew: Customizing TinyMCE 4.0 | A2Z Web Design Tutorial

  2. PLEASE FIX the Tiny/MCE!

    The Upgrade is a pain….

    Us bloggers want drag and drop/paste back for text and images!

  3. Pingback: Tiny MCE has underwent a few changes in 4.0 | ClarkWP WordPress Magazine

Comments are closed.