TinyMCE problems in WordPress

The default WYSIWYG editor that comes with WordPress, TinyMCE, is perfectly adequate for writing simple text content. Given that’s what WordPress is all about, that’s great. But what if you want to embed custom HTML into your posts? You might be lucky, it depends on what kind of day TinyMCE is having. Some code will be preserved, the rest gets flushed down the virtual swanny or converted to nonsense.

Take this snippet for example:

<blockquote class="quoteleft">
<div class="mid">
<p>My Fancy Quote Text</p></div>
<div class="bot"></div>

You can paste this into the Code view of the editor just fine. But when you save your work or switch to the WYSIWYG editor, it will be converted to this:

<blockquote class="quoteleft">
<p class="mid">&nbsp;</p>
My Fancy Quote Text</blockquote>

WTF? Actually, I shouldn’t exclaim surprise. I’m well aware of this behaviour. When I used to work at Nixon McInnes, the in-house CMS also used TinyMCE so I have long experience of this odd behaviour. With that experience comes the knowledge that I can customise TinyMCE to get around this problem.

So I had a go at doing just that, but ran into problems. It seems that not only is it a TinyMCE issue but also something to do with KSES — a filter for cleaning up the editor input to ensure that ‘rogue’ HTML tags are stripped out — in the name of security and cleanliness no doubt. And in addition, it also means editing core WordPress files, something I’m not keen on doing as you then have to track your changes, or you’ll overwrite them the next time you upgrade…

In frustration, I hit the support forums to find a better solution. It appears that TinyMCE’s default setup in Worpdress is upsetting a lot of users and some have been asking for a better solution for over a year. Solutions I discovered include disabling TinyMCE altogether (!) or trying a better editor such as Xinha or WYMEditor. Disabling TinyMCE does solve the problem but it also removes a lot of the nice functionality of handling formatting. And neither of the other replacements is any good: the Xinha plugin is out of date and doesn’t work with WP 2.3 and WYMEditor completely disables WordPress’ media management which simply isn’t an option for me.

So what to do? I’ve so far not found a decent solution to this problem. If someone can recommend a better WYSIWYG editor that works with WordPress 2.3.2+ (and leaves your HTML intact) or if you have an even better solution, I’d love to hear it. You wouldn’t believe what I had to go through just to post the code examples above…

11 thoughts on “TinyMCE problems in WordPress

  1. Ho yea, and you haven’t used it in Safari, it’s even worse! I didn’t get a chance to look at alternatives, I guess that there might be some wordpress plugin out there that can replace TinyMCE. I’ll keep an eye on the comments :)

  2. Thanks Sunaryo, I’ll have a look at that. Gaetan — I’ll keep my eyes peeled too. It’s one of the few things about WordPress that I dislike…

  3. Have you considered using a offline editor such as Qumana, Bytescout Post2Blog or Scribefire add-on to Firefox? I know TinyMCE is supposed to behave, but this is a good workaround too.

  4. @Lakshmi: thanks for the information. I’m now looking at Scribefire which seems pretty good, although it doesn’t appear to work with editing pages on my blogs that use the NAVT plugin, because it seems to trash the page slug and offers no way of fixing that. I shall persevere.

    I also checked out the FCK editor plugin for WP which also does weird things to previously saved HTML and is incredibly bloated and slow.

    Me not liking this situation. :-(

  5. I haven’t had a chance to try this out myself yet, but I just came across the following solution for the YUI editor in WordPress, I guess this would work for TinyMCE too… http://tinyurl.com/2zqdcw

    It involves a change to wp-config.php, so no hacking of the WP core, which is always good! :)

  6. Cool, thanks Steve for the heads up — definitely need to check that out. And the YUI editor itself looks quite nice, but as I already have other libraries being loaded on the blog for other functionality, I probably wouldn’t use it due to ‘library bloat’. Cheers.

  7. Pingback: frisk design » Blog Archive » Wordpress 2.5 PreviewEdit

  8. I have similars issues with tinyMCE, there is another option if you are not using FireFox. That would be Ektron Visual Formatter.

  9. Hi Liz, thanks for your input. I’ll check it out. Currently, I’ve just disabled the visual editor which means WP leaves my code alone and gives me most of the features I need. Not perfect, but it works.

  10. Hey – I think I might have found part of an answer. I was having a problem with TinyMCE rewriting my entities while trying to post an html tutorial.

    The answer was to use htmlentities on the content going into the text area. For instance, previously the code behind my editor form was this (btw I’m not trying to write full html here as I assume it’ll get stripped):

    textarea $content /textarea

    when I changed to:

    textarea htmlentities($content) /textarea

    everything worked fine!

    btw – I use a floated p tag for my pullquotes – TinyMCE never seems to grumble about that…

    hope some of this helps