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.

Featured Plugin - WordPress Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
Find out more

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:

http://youtu.be/01reHnBCAIA

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

Comments (43)

  1. I disagree. I love the lack of options of WP’s tinymce editor. When I train newbies, it offers just the right amount of features without going over board.

    I’ve had to train others on Joomla and Drupal. Wanted to pull my hair out.

    Extending the features is indeed plugin territory in my opinion.

    • Hi Kim,

      My only response to that would be that most people already use software such as MS Word (with its plethora of buttons). From there, using an editor with plenty of options shouldn’t be overwhelming (especially considering you can limit the options should you want to).

      Cheers,

      Tom

  2. I’m a big fan of Ultimate TinyMCE – but I’ve said that here several times before.

    Josh (the author) is constantly trying to perfect it. I don’t think I’ve gone a week without seeing an update come through for that plugin which addresses something.

    =)

  3. I for myself never use TinyMCE, I adore the HTML editor ;-) And for clients that request it the built-in version always did all my clients want. I understand that for some projects and some tastes more is needed so the advanced plugins for TinyMCE are enough IMHO, I would never replace it with CKE or such…

  4. there are numerous issues when dealing with arabic text, the most bothersome being the moving of punctuation. this makes blogs difficult to read. the fonts chosen are not the best or most standard, adding to troubles reading.

  5. So do these alternative editors avoid the problem of having all code/script stripped out every time you switch back to visual from HTML mode? I can live with the reduced functionality, but it drives me crazy that I can’t embed anything and then ever switch back to the visual mode.

    • Hi Rachel, this is most commonly caused by the wordpress function ‘wpautop’. Basically, here is how it works:

      1. WordPress does not (normally) save br or p tags into the database.

      2. Instead, WordPress looks at your content and “guesses” where it should add any br and p tags.

      3. My plugin (and Tinymce Advanced from what I’ve read) both have an option to disable this ‘wpautop’ function. However…

      4. If you choose to disable the ‘wpautop’ function, any content you have already created will need to be re-checked. This is because you didn’t manually enter any br and p tags when creating that content. So, when the function is disabled, it will no longer “guess” where to add these tags.

      I hope this helps some of you. Just remember, disable the ‘wpautop’ function with extreme care.

    • I also forgot to mention, with the Ultimate Tiynmce plugin, there are a few buttons in the visual mode which allow you to enter any embed or iframe content. Just click the button, enter your code, and it is displayed in the visual editor.

  6. Hi, author of the Ultimate Tinymce plugin here. Thanks for a wonderful write-up. It’s always nice stumbling upon a new article regarding my plugin. And seeing how you remained unbiased in your description of each plugin is very impressive!! I have to admit, I am curious as to which editor you currently use. Honestly, between you and me (shhhhh), I still prefer to use the html editor most of the time.

    Again, thank you!

  7. I like CKEditor because when you use WordPress as a CMS (not a Blog) it allows you to create HTML templates and use your theme’s style sheet with it. This makes it possible for my customers to edit in real WYSIWYG mode (they most of the times know nothing about HTML).
    What I do not like about the CKEditor for WordPress plugin is that these templates are stored in the plugin directory. So when you upgrade, your templates are gone. This makes it necessary to add manual actions when upgrading, and the plugin is regularly updated…

    Does anyone know any other editor that does have the abillity to use HTML templates?

  8. Is there anyway to make the default Visual editor NOT double space? I am using the latest BBPress to run a poetry board. If you paste an MS Word document into the Visual editor, it double spaces it (curiously, it does not do that for Textedit (Mac) documents). If you paste it into TinyMCE in HTML mode, it doesn’t
    double space it. Any help would be greatly appreciated.

      • Tom,
        thanks for the suggestion, but no, that doesn’t help. I think that I found the solution in principle: I need to set forced_root_block to false. However, when
        I tried the Advanced TinyMCE Configuration plugin to do it, nothing happened.
        I suspect that the plugin may not work with BBpress, or something like that. Any further advice would be greatly appreciated!

        Thanks,
        Martin

  9. The TinyMCE used in WordPress can be downright infuriating at times, but I’m going to give the WP community a break here… because most of it is really TinyMCE’s fault to begin with.

    In writing plugins for WP and other CMSes, I’ve had to delve deep into the dark underbelly of TinyMCE code. It’s a scary, messy place full of underdocumented / undocumented code, global variables, convoluted plugin structure, and obtuse browser-specific JS errors. It rarely breaks in a modular fashion; make a minor screw up in one plugin and the ripple effect can shut down the entire TinyMCE.

    Furthermore, the TinyMCE support forum is a great place to go… if you want to get insulted. Seriously, I’ve never stumbled upon such a hostile “support” board. Ask someone how to slightly bend TinyMCE to fit your project, and you’ll be told how A) your idea is stupid and wrong, and B) you should bend your project to fit TinyMCE.

    I pity the fool who has to spend an extensive period of time hacking TinyMCE. It’s responsible for at least one gray patch on my head.

  10. I think I’m in the minority when I say this, but I want to put it out there that TinyMCE is too advanced, primarily, because we shouldn’t be doing anything advanced in the editor.

    When I hear people wanting greater visual control in TinyMCE, I shudder and remember the days of Dreamweaver where every page had to be individually formatted perfectly. While this felt AWESOME at first, 6 months later, the site was an inconsistent mess and you couldn’t remember whether your heading 3s were 14px red bold or 15px maroon italic. The solution to all of these problems is do use Headings, Blockquotes, other semantic elements, inline styles (using the style dropdown menu that you can enable in TinyMCE), etc for formatting. Those things rely on CSS and will stay consistent.

    Similarly, for those who wish they could more easily put code into the editor, WordPress has all sorts of alternatives for including layout and functionality changes that are more safe, consistent, and maintainable. Shortcodes. Page Templates. Filtering `the_content`. Featured images. I could go on.

    TinyMCE is great for entering text and doing basic formatting. Anything else is hard because it’s a bad idea.

    I realize that this means that more in-depth WordPress knowledge is required to set up a lot of what I’m advocating, but that’s because it’s hard to implement things in a consistent, usable way. While site owners seem to really care about crazy image alignments and 30 fonts on a page, I don’t think website visitors care. They just want to come to your site, read your blog post written in a nice 15px Arial and then leave.

  11. @mark_root_wiley: thanks for that post. I agree! Less is more!

    If users see buttons to switch text color and fonts they will use them. While more power to the user may seem like a good idea it really is not. It gets messy very fast.

    Visual control is not something the users should do in a content editor. Better leave it to the theme programmer to take care of it.

    I’m a web designer/programmer. My clients usually write and format their own content. I’ve used several CMS. I learned it works best when only the most essential Editor buttons are exposed.

    If a specific look or layout is needed I add it the WordPress way (short codes, page template). This makes for easier use, cleaner HTML code and a great visual result.

    • Glad to hear it, @MrDutchy! Just recently, I tried to start removing “WYSIWYG” from my vocabulary altogether. We don’t want a WYSIWYG editor in the most absolute sense. We need to structure our content with the editor and let the site to the heavy lifting for us.

  12. Wow, I think a whole new world opened up to me as a WordPress designer and blogger.

    ‘Advanced TinyMCE’ coupled with ‘TinyMCE and TinyMCE Advanced Professsional Formats and Styles’ offers me and my customers a simple way to use custom formatting (via CSS classes) without touching the HTML-tab.

    No more fixing accidentally (or without better knowledge) modified HTML like this:

    ### Look I’m a unicorn!

  13. One nuisance about wordpress “Distraction-Free Writing mode” is that, sink kitchen buttons will not show up in that mode. To resolve this, we need add the following code to functions.php of your theme:

    function my_mce_fullscreen($buttons) {
    $buttons[] = ‘fullscreen’;
    return $buttons;
    }
    add_filter(‘mce_buttons’, ‘my_mce_fullscreen’);

    More details can be found here: http://www.doxer.org/resolved-show-kitchen-sink-buttons-when-wordpress-goes-to-fullscreen-mode/

Participate