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:
<p>My Fancy Quote Text</p></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:
<p class="mid"> </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…