Updated TinyMCE Mods Plugin

Hi Everyone, Mark here.

As I mentioned at the last meetup, WordPress 3.9 comes with TinyMCE 4.0 which breaks the old plugin I had distributed to the group to modify the editor.

Since most of my client sites use that plugin (or just code), I’ve gone out and figured out how to make similar changes in a new plugin. TinyMCE 4.0 works a little differently, so the formats dropdown takes a minute to get used to. As best I can tell, there is no way around this.

I’ve posted the new plugin on GitHub with a gist which is also embedded below.

That includes a:

  • Readme
  • Base Plugin
  • Filter example

Here’s how it looks in action:

Mark's New MCE Plugin

A Few More Notes

As I posted on Twitter recently:

I don’t have much patience for “creative” formatting, so I’ve gone quite far in that direction by removing even more buttons including all alignment buttons. I also moved blockquote and strikethrough to the format drop down as I think they both make more sense there.I also personally don’t use the More tag so I’ve stripped that out.  For certain client sites, I’ll probably add the horizontal rule button with the mrw_mce_style_formats filter. I’m not opposed to formatting text, but the only way I’m willing to do it is with custom Text Styles defined by me.

Once I did that, there was space to move all the remaining buttons to the top row of the editor. I love that!

Finally, you’ll notice in the example filter that I use a "selector" attribute so that the style can only be applied to links. This is AWESOME and solves a big headache I’ve previously run into where you can’t be sure if a class to make a button gets put on the <p> tag or the <a> tag.

The Code

Since WordPress can embed gists, I might as well!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s