Daniel Harrison's Personal Blog

Personal blog for daniel harrison

Content Editable Thoughts April 2, 2010

Filed under: Uncategorized — danielharrison @ 1:26 am
Tags: , ,

I’ve been playing pretty heavily with contentEditable and canvas from html5 for the last few days and here’s some initial thoughts.

It’s very much bound to the IE model, or rather it came from it but didn’t really advance anything.  It feels like it could have gone a bit further in a neater manner.   You need to play very carefully with the dom and document.execCommand.  If you make changes just before or just after it can misinterpret it.  For example execCommand ‘heading’ and then insertparagraph in firefox will create a new paragraph rather than a heading.  My guess as it works off range position, would be it applies heading and without moving the cursor then applies it which means paragraph overrides heading.  Webkit browsers don’t seem to have this problem.   At the moment I’ve had to create an event queue and split it into apply changes and then a post processing step to clean up or continue the modifications.  A 0ms timeout callback seems to be able to allow clean operation.

There’s much promise, but to be able to be able to use if to it’s full advantage I think it needs a few more hooks.  For example it would be neat if execcommand was able to return the div that it was operating on etc.

Another downside is it won’t work on ipad/iphone yet as it’s not supported in mobile safari.  So until either apple enables it in mobile safari or the possibility opens up to ship an alternate webkit (I suspect this is what the mercury browser is doing) or turn it on in an embedded mobile safari you’ll need to write a separate editable interface for those clients.  I would have thought that for the iPad (not for the iphone though) it would have been an ideal light weight editing environment.  It work’s great in desktop safari.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s