IOS5 now supports contenteditable. Come on Android!

Users who love or need their WYSIWYG editor (Whizzywig, TinyMCE, CKEditor etc.)  have been complaining for years that they would not work on on their mobile device. They could edit their blog or update their favourite site with rich text on their desktop machine but no joy on their iPad or smartphone.

They would not work because no mobile browser would support the contentEditable attribute despite the fact that all the major browsers support it in their desktop versions - Internet Explorer since 5.5. Well it seems Apple have been listening and now these things will work in IOS5. Great if you have an iPad 2.

Not so great with Android though, which not only still fails to support it, but actually lies if you test for support:

document.getElementById("test").isContentEditable

returns "true" but the onscreen keyboard will not appear so you cannot type into the edit area. This is Issue 8253 for Android. No sign of a fix yet.

Last Whizzywig of 2011

There's a new version of Whizzywig 2011  and it should be the last one ever. Clearly we can't go on calling new releases "2011", so in 2012 it will appear with a new name - how exciting! - and, if all goes according to plan, its own website.

Many thanks to all who have tried it out in 2011 and provided feedback. Hopefully it will be a much better editor for this.

The main new feature is clean pasting: if you paste in stuff from a document or a website then the editor will strip out all extraneous styling, fonts, colors , spans, classes and ids that only made sense on the original page, leaving you with some uncluttered and pure html. This should be pretty consistent across browsers (some were driving me mad with their silly paste behavior!).

And here, documented for the first time, are the keyboard controls:
 CTRL+Space - Clear all inline styles and classes
 CTRL+B - Bold selected text
 CTRL+I - Italic selected text
 CTRL+U - Underline selected text
 CTRL+H - Edit the HTML source
 CTRL+L - Insert a Link
 CTRL+M - Insert an iMage

Note that the cursor must be in the edit area for the above to work, or you'll get the browser default action (History, Bookmarks, etc.)

Double-click
 a link - bring up the Link dialogue
 an image - bring up the Image dialogue
 the toolbar - toggle full window