Advanced WYSIWYG in Wordpress 2.1

If you’re a Wordpress user, and have the slightest grasp of HTML, then at some point in your blogging life you’re sure to have flung an insult at the built-in WYSIWYG editor that comes with Wordpress. While it suffices to accomplish the most minor formatting tasks, like bold, italics, and strikethough strikethrough, much is left to be desired.

Sure, there are keyboard commands to perform other standard formatting norms, like underline, but to the Wordpress noob these are non-intuitive and a bit wonky to use.

To those who have, or are thinking of committing WYSIWYG Hara-Kiri…..wait!!! All hope is not lost. That is to say, Wordpress 2.1 has a little trick up its sleeve: an Advanced Toolbar.
Wordpress 2.1: Advanced WYSIWYG

By using the following key commands, most users will can reveal a second set of features that will enhance their post writing experience:

Windows Firefox: Alt+Shift+V (Firefox)
Windows Internet Explorer: Alt+V (Internet Explorer)
Mac OS X Firefox: Ctrl+V
Mac OS X Safari: Sorry Charlie

“What kind of goodies do I get for all my troubles,” you ask?

  • Text styles
  • Underline
  • Full paragaph alignment
  • Text coloring
  • Two varieties of paste (text and Word)
  • Formatting removal
  • Code cleanup
  • Custom character insertion
  • Undo/redo

While it hardly provides the robust features one could conjure up with their own HTML wizardry, the Advanced WYSIWYG toolbar certainly aims to please, at least more so than it’s basic incarnation. That said, blogeth away Ye Wordpress Faithful…

8 May at 3:14pm by Scott Robbin

Comments

29 Responses to “Advanced WYSIWYG in Wordpress 2.1”

  1. Ron on May 8th, 2007 4:38 pm

    Thanks a million, mate! Up until now I’ve been stuck with switching over to the HTML editor every time I wanted an H4 subheading in one of my blog posts.

  2. Alex on May 9th, 2007 9:57 am

    damn who knew?! awesome find and thanks for sharing it!

  3. Lex on May 9th, 2007 12:34 pm

    great! tnx!

  4. Nick on May 9th, 2007 12:49 pm

    I knew about this a while ago. Still, at least you did your blogger’s duty and pointed it out to everyone else, and for that I commend you.

    If you want to delve a little deeper, you can actually edit some backend files that control TinyMCE’s toolbar and move those up onto the always-visible toolbar and throw the stuff you won’t use onto the hidden one.

    I’ve always wondered why they didn’t keep the Underline and Paste controls on the main toolbar anyway…they’re not exactly hard concepts to grasp.

  5. David Bradley on May 9th, 2007 12:50 pm

    You say “most users”, it does nothing for me. Why am I excluded, I’m using 2.1.3

    db

    Scott Replies: Hi David. It’s more likely that you’re being excluded because of your browser. TinyMCE, the editor that Wordpress uses is included on all 2.1 releases, including yours, which is the latest.

  6. koew on May 9th, 2007 12:53 pm

    I had to find out the shortcuts by the try ‘n fail-method. As I generally like to see my HTML-tags, I switched it off after a big fight against the WYSIWYG-editor. Though I’m an old skool b2-fanboy, so using the regular textfield was my only real option.

  7. Shane on May 9th, 2007 12:54 pm

    Seriously?!

    This is just the TinyMCE editor from Moxiecode with more buttons enabled. It’s what you can add to your website if you like.

    http://tinymce.moxiecode.com/example_full.php?example=true

    In fact it it available for lots of Content Management Systems (CMS). Drupal, Plone, Mambo, etc.

    http://tinymce.moxiecode.com/download.php

  8. Oh, yes! on May 9th, 2007 12:57 pm

    Oh, yes! Thats a great reveal. Thanks pow!
    ___________________________________________
    I’m a wordpress user at http://wwn.110mb.com

  9. Chris on May 9th, 2007 1:01 pm

    here’s a very similar post (of mine) from the end of january.

    What you and your readers may also find interesting is at the top of that post is a link to a little plugin that makes showing these extra buttons a lot easier.

    Cheers,
    Chris

    Scott Replies: : Hi Chris. Great article. Thanks so much for the plugin post; that’s so much easier that trying to remember the key commands.

  10. Rob on May 9th, 2007 2:54 pm

    In Windows Firefox 2.0.0.3, if I press Alt+Shift+V, it just pops up the “View” menu at the top - I don’t get an advanced toolbar. I’m using Wordpress 2.1.3 and attempting this in the “Write Post” and “Write Page” screens. What am I doing wrong?

    Scott Replied: Thanks to everyone who replied to Rob’s question. I’m just going to reiterate what you said here, for the sake of comment reading continuity. “Edit your profile in Wordpress and check the box above your name and contact info that says “Use the visual editor when writing.”

  11. Wayde Christie on May 9th, 2007 6:19 pm

    The ‘Advanced editing for WordPress 2.0′ plugin has been out for almost 2 years, and is imo a far better solution. Why just use what WordPress decides are ‘advanced’ functions when you can completely and easily customise the toolbar with whatever functions you want using this plugin? If using WordPress as a CMS, this plugin is the only way to go.

  12. SHRIKEE on May 9th, 2007 6:28 pm

    now if it only created decent html when you press save it would actually be nice to use the wysiwyg :)

    nice trick though.

  13. denilw on May 9th, 2007 6:36 pm

    Thanks for the tip.

  14. Joe on May 9th, 2007 7:01 pm

    Rob: I had the same problem in Firefox and IE6. The following worked for me;

    Go into Users > Your Profile and make sure that “Use the visual editor when writing” is checked.

    Cheers to Chris for that wordpress editor tip

  15. Nicole on May 9th, 2007 7:49 pm

    Rob, you need to edit your profile in Wordpress and check the box above your name and contact info that says “Use the visual editor when writing”. Then you will see both tabs as shown in the screenshot above.

  16. Kevin Miller on May 9th, 2007 8:36 pm

    Alt+Shift+V works with Linux Firefox as well.

  17. llamasonic on May 9th, 2007 11:42 pm

    thanks for the great tip - using ecto here, anyone else have a fave editor for osx?

  18. JL Aosta on May 10th, 2007 12:14 am

    This is indeed a great addon. And yes, you would have thought of asking developers to come up with this one.

    Thanks a bunch. I love it!!!

  19. Jayce Ooi on May 10th, 2007 9:07 am

    Thanks for info. :) It helps a lot.

  20. bnpositive on May 10th, 2007 11:52 am

    Very nice! My clients will appreciate this new availability.

  21. Herman HugeLoad on May 11th, 2007 2:12 am

    I only wish that there was a viable alternative to TinyMCE. On my WP 2.1.3 installation I would almost describe the editing environment as “unstable”. The WYSIWYG editor exhibits completely unpredictable behavior. Now that could have some thing to do with the fact that I’m (mostly) an Opera user, but that’s a SWAG and nothing more. If only….IF ONLY there was another reasonable editor…I must confess that I really dislike TinyMCE.

    All of that said however, thanks a bunch for pointing out this “reveal”. Thanks also to Chris for shunting readers over to his post on the subject from earlier in the year.

  22. Kevin Reynen on May 11th, 2007 10:16 am

    Will someone please explain why people are so excited about this? Isn’t this just the TinyMCE editor with toggles for different button sets. TinyMCE already has an HTML editor as well as PHP editor with lockable code snippets! This doesn’t enable those, IMCE image/media uploads, full screen mode (makes TinyMCE look even more like Word!), or any or the other user contributed buttons like YouTube, Flickr, virtual keyboard for non-ASCII characters, etc.

  23. em on May 14th, 2007 4:43 am

    not sure what’s going on, but I just installed a fresh version of Wordpress 2.13 and I had to add the following http://trac.wordpress.org/ticket/4036 to even have the option to use visual editor when writing. Nothing still happens in the editor… At least I now know the shortcut to toggle the View option in all browsers!

  24. Motorcycle Guy on May 14th, 2007 8:32 pm

    Some reason in my firefox it’s simply alt-v but it’s a great thing to know nonetheless.

  25. David Bradley on May 15th, 2007 2:20 am

    Thanks for the tip Scott, I’ll try tweaking my browser settings, see if I can get this thing working

    db

  26. Irdzra on May 17th, 2007 3:06 am

    whoa..thanks a lot..i never knew that thing existed ! :)

  27. Respiro the logo design guy on May 19th, 2007 12:11 pm

    Many thanks, Scott! :)

  28. Don@AffiliateWatcher on May 23rd, 2007 10:01 am

    Nice post. Not all of us know how to make Wordpress scream mercy, post like this will help us get more out of our blogs!

    Thanks and keep ‘em coming.

    Don

  29. SHRIKEE on May 25th, 2007 5:27 am

    There is or used to be a small plugin for the advanced editor for wordpress.
    In which you could create up to 3 extra bars.

    It is a bit tricky to set up though. But you can use tinymce plugins to extend funtionality and add them in those extra 3 bars.

    It’s not my plugin but its more usefull than your way because you can create your own bars with only the stuff you think is usefull :)

    heres the link: http://blog.labnotes.org/2005/12/26/advanced-editing-for-wordpress-20/

Leave a Reply