Why You Hate The WordPress Text Editor and What To Do About It

<rant>

There is a lot to not love about TinyMCE – the open source text editor that is used in WordPress. I’ll start. Who here thinks that this is an ample number of buttons for a WYSIWYG text editor?

TinyMCE
Mmm…fully featured.

And on a similar note, someone needs to have a rethink about naming the second row of buttons the “kitchen sink”:

TinyMCE

When I read “kitchen sink”, I picture every possible WYSIWYG function under the sun. Not a few bonus buttons.

A few weeks ago, I canvassed our ever-helpful Facebook fans for their thoughts on TinyMCE and received a rather overwhelming response:

  • It removes <div style=”clear: both”></div> or any other code for that matter
  • No HTML view while in full screen mode
  • The way it handles <br />, &nbsp; and paragraphs drives me crazy
  • When I add captions to pictures, the pictures move up automatically
  • People are afraid to move back and forth from Visual Editor to HTML mode
  • You can’t embed tables easily
  • Full screen mode doesn’t have the kitchen sink
  • Managing content on iPad or iPhone is painful
  • Line numbers would be nice
  • It doesn’t allow you to do a carriage return in the Visual Editor
  • Random <div> creation destroys paragraph spacing

The list went on. One of the oft-repeated complaints was that it is just too damned basic. And you know what’s funny? TinyMCE just wrapped this paragraph in <div> tags (which it always does after creating a list). So I will now have to manually remove those tags using the HTML editor. Which will return to the top of the screen when I click on it. Grrr…

</rant>

Alright, so that’s enough moaning for the time being. There are ways of addressing some of these problems – in fact, I have 4 for you today.

1. TinyMCE Advanced

Most people are familiar with TinyMCE Advanced – for most experienced WordPress users, installing this plugin is one of the first things they do when setting up a new site. It has some great features:

  • It imports CSS classes from your theme’s style sheet into a drop down menu
  • Buttons for making tables
  • A real HTML editor
  • Superscript and subscript
TinyMCE Advanced
You can add and remove the extra buttons as you see fit.

There are plenty of other features. Many argue that TinyMCE Advanced should be packaged with WordPress as standard. It is difficult to argue with them – it would certainly be an improvement at the very least.

2. Ultimate TinyMCE

TinyMCE Advanced is not the only available alternative. Hot on its heels, with a near-perfect rating in the WordPress Plugin Directory, is Ultimate TinyMCE. This plugin actually takes things to another level with some pretty interesting features:

  • Advanced features for images (such as mouseover and mouseout)
  • Easily add page anchors to posts that become too long to scroll through all the content.
  • Use image mapping to create separate links over the same image. Great for using photoshop images as navigation.

Check out this video for a showcase of what Ultimate TinyMCE can do:

It may just have the beating of TinyMCE Advanced. Not to mention the fact that it is being developed by a highly enthusiastic guy who is working hard on regular updates. It has just 75,000 downloads to date, compared with TinyMCE Advanced’s 1,275,000, but that gap will no doubt start closing soon.

3. CKEditor

Of course, another alternative is just to try a completely different text editor altogether. And that is where CKEditor comes in. If you’re keen on getting away from TinyMCE altogether, this is your best option.

CKEditor

This plugin also has very high ratings in the directory, and is being updated regularly. Some of the reliability issues with TinyMCE disappear when using CKEditor. But whilst it may not have the beating of TinyMCE on all fronts, it is competition like this that may force TinyMCE to up its game.

4. Raw HTML

Finally, we have something for people who like to get down and dirty with code. Raw HTML is a plugin that assumes you are not an idiot. By that I mean it allows you to use HTML, CSS and JavaScript within WordPress without it getting mangled or removed. All you need to do is enclose your code with [raw][/raw] tags, and it will be ignored by WordPress.

The plugin also places a widget within your New Post/Page screen which allows you to disable certain features:

Raw HTML

Please note that the full version of Raw HTML is a premium plugin that sells for $15.

All Is Not Lost

WordPress may not have the greatest WYSIWYG editor around, and we may have been moaning about certain things for several releases of WordPress without anything being done about them, but there is a light at the end of the tunnel, as you can see from the above options.

Creative Commons photos courtesy of Lili Vieira de Carvalho