WordPress WYSIWYG gets more accessible

By Andy

Unless you’ve been keeping a close eye on WordPress 1.6 Alpha, you should be delighted to learn that the WordPress implementation of TinyMCE is being tweaked and improved with more readable fonts and entirely mouse-free editing. You should see these changes on WP.com very soon.

It is now possible to tab from Title to Post. If you’re used to mousing around the Write Post screen, give this a try. It surprised me how much more comfortable it is to use a key than it is to reach for the mouse. I hope you like it, too.

The editor is now styled with em-based fonts to support resizing in Internet Explorer. If you’ve had trouble seeing your text as you type, click View > Text Size and select Larger or Largest. Firefox users can still use ctrl++ and ctrl+- to accomplish the same.

And now for something completely different: writing posts without using the mouse! And I don’t mean typing out all of your HTML elements, either. Hotkeys (technically “accesskeys”) are being added to TinyMCE! It already supports the usual ctrl-keys for bold, underline and italic, plus a few focus keys: Alt+q jumps to the buttons, Alt+z jumps to the rich editor, Alt+x jumps to the element path the bottom bar. We’ve added more than fifteen accesskeys so you never have to click in the toolbar! For example, Alt+o is equivalent to clicking the “Ordered List” button, Alt+c centers the current paragraph, Alt+m opens the Insert/edit Image dialog. (Alt is for Windows and Linux users. Macs have their own key for this.)

These patches are all written and should be available to use very soon. Meanwhile, I’ll be working on another accesskey: Alt-H. Any guesses as to what this will do?

17 Responses to “WordPress WYSIWYG gets more accessible”

  1. mellertime Says:

    And coming soon, Alt + T to make your Toast, Alt + C to make a hot cup of Coffee, and Alt + G to find the nearest hot geeky WoW-playing Girl!

    Hey, I can dream, can’t I?

    Some things WordPress can’t do… For everything else, there’s Plugins…

  2. Danny Says:

    And coming soon, Safari compatibility?

    Whose butt needs a fire lit under it for this to happen?

  3. Andy Says:

    Danny: Soon, I hope. Moxiecode, the creators of TinyMCE, are working on it and with any luck, they’ll get it done in time for the release of WP 1.6.

  4. Moxiecode Says:

    The current implementation of WYSIWYG capabilities in Safari is yet slighty to bad to make a good, solid, stable implementation. We are monitoring the development, would really help if we had direct contact with developers as we did with Opera, but the ppl developing on Safari are hard to find.

    Take a look at Opera Preview 1 release, it works (almost) flawless in TinyMCE 2.0RC4, the developers at Opera Software ASA has made great success in implementing support for WYSIWYG editors.

    We are honored that WordPress uses TinyMCE for WYSIWYG editing, WordPress is an impressive software, keep up the good work.

  5. Andy Says:

    Well there you have it, folks. If you can find them, the butts needing a warmup belong to the Safari developers! :-)

  6. new user of wordpress.com Says:

    Hi Andy:

    great! I’m having problems w. TinyMCE and assume it’s me, but I’m hoping that you or somebody can sort it out.

    I put some images and error codes up at:
    http://chowrescue.wordpress.com/off-topic/
    I’m using windows xp home, Firefox 1.5b2 (and I also tried firefox 1.07 etc)
    I have javascript enabled.
    but I’m still getting errors.
    It is probably something simple… oh well

    Have you seen Dojo:
    http://dojotoolkit.org/archive/dojo-2005-11-07/demos/widget/Editor.html

  7. Matt Says:

    Moxiecode, I’ll see if I can introduce you to some people.

  8. Andy Says:

    new user: I see that the CSS you copied is an older version. We are updating things every day! That old CSS is probably stuck in your cache. Try your browser’s Reload button. Then shift-click Reload and see if that fixes it. Or manually clear your cache in FF: Tools > Options > Privacy.

  9. Moxiecode Says:

    FYI, Firefox 1.5b2 might be buggy, there is an RC1 release out now to, but there are some known issues on that browser as well.

    If you could hook us up Matt, that would be super. Ive tried the IRC channel but there seems to only be Developer Wanabees in there :)

    If I had to submit every little thing we find through their bug report system, i would go nutz, basicly some things need to be discussed before action is taken (or report is filed). Thats how we worked with the Opera dev team, we had loooong email discussions about all sorts of stuff.

  10. chowrescue Says:

    thanks for the recommendation to clear the cache.
    no, that didn’t work. I clear the cache every day too.

    I downloaded the new Mozilla Firefox for Windows 1.5 RC2 beta from http://www.betanews.com
    at: http://fileforum.betanews.com/detail/Mozilla_Firefox_for_Windows/1032985422/1

    but I bet that doesn’t work either, since I’ve already tried firefox 1.07
    I’m planning on scrubbing firefox and rebuilding entirely
    I haven’t tried IE at all. ugh. I can’t stand IE — everytime I use it, I regret it

    I think it’s something more fundamental…
    Maybe it’s my Firewall: OutPost Pro 3.0 latest version w. updates
    even though I’ve added http://www.wordpress.com, wordpress.com, chowrescue.wordpress.com to my list of Exclusions, which means it will allow javascripts etc, maybe Agnitum adds non-compliant javascript code to the browser which messes w. the javascripts wordpress.com and TinyMCE are trying to use…. I dunno… but then again, I DID disable the firewall just to see and that didn’t work either. and I flushed the browser cache too.

    well, it’s okay, I can make do, by switching back and forth between the non-visual rich editor and the visual rich text editor, which has no visual toolbar for me.

    It doesn’t really matter. What DOES matter is that my wordpress web site is absolutely beautiful, I love the design, and it helped us to rescue dogs who would otherwise have been pts (put to sleep).

    so thanks, you are making a substantial real world difference.

  11. Robert Accettura Says:

    Will the wordpress changes be sent back to TinyMCE for inclusion? Or is this just a fork?

  12. Andy Says:

    Robert: It was mostly done via the TinyMCE plugin system, so I didn’t have to modify the TinyMCE core script. A few changes were made to files in the Advanced theme to focus the first input on each popup and to let popups be closed with Esc. I wouldn’t call that a fork :-)

  13. dudymas Says:

    Heck yea you’d better add tab support!
    And I want Ctrl-E, R, and L changing the text from left, right, and center mode (anti-respectively, because I’m dyslexic like that… and it’s all wordpress’s fault)

    *cracks whip*
    Ack-tung!


    Oh, and good work (I guess) adding image support
    </angst and jerkism>

  14. Lorelle on WordPress » How WordPress Users are Benefiting from WordPress.com Says:

    [...] In Ryan Boren’s Monthly Summary of the status of WordPress 1.6 development, he lists a lot of the bug fixes and new features fixed and added to the test versions of WordPress 1.6. One of the features is the WYSIWYG Write Post interface which has been made more accessible in keeping with web standards – a feature that wordpress.com users are enjoying thoroughly. [...]

  15. John Pruriel Says:

    Alt+H – hideing smth? or may be history-log. Anyway, the more usefull hot keys we have – less time we spen on mouse “movin-clickin”.

  16. Matt on WordPress » More WYSIWYG Improvements Says:

    [...] Andy has the details. [...]

  17. ira Says:

    I hope we can upload our pictures from our computer and we don’t need to link it to URL ‘coz it is time consuming.

Comments are closed.