Over the past few weeks I've been delving into a lot of things that have always been on my todo list, but always seemed too esoteric or complex to explore.
The good news is, contentEditable isn't some half-baked proprietary technology anymore that only IE supports. Other browsers like Safari, Chrome, Firefox, and Opera not only support this technology, but they support it much better than IE. Yes, there are gobs of cross-browser issues that you have to work-around if you want to support IE and everyone else . The good news is that many have treaded these waters before you and their hard fought wisdom is ripe for the picking. I refer you to some documents that I found very helpful in writing a very remedial implementation of contentEditable.
If you follow along with the knowledge presented in those two articles, you too can have basic editable content. So far, the only caveats that I have come across is that while all the browsers now support contentEditable, they do not yet support all of the new features that one another have added to the legacy IE API. For example, Webkit doesn't yet support all of the useful extensions made to the API by Mozilla.
Another caveat that I've come across is with creating controls and maintaining a selection in the editable area. In Webkit, at least, the buttons that you make to control the editor cannot be arbitrary elements like <div> or <li>. If you do not use the right elements for editor controls, any selection that you make in the editor disappears when you click on the control. To maintain a selection, you must use form controls for your editor controls, like <button> elements.
Another item on my todo list was to build a desktop application with Titanium, a new SDK from a company called Appcelerator, which allows you to build desktop applications using Webkit and web technologies. This is similar to the Adobe AIR SDK.
In tinkering with Titanium, I have, in fact, managed to package and build the "Finder" portion of my framework as a fully functioning desktop application. Even at this early alpha stage of its development, I found that it is superior to Adobe AIR in many ways.
To be fair to Adobe AIR, I've read that a forthcoming release of AIR is ripe to address at least some of these issues, but presently, I find that Titanium is poised for excellance.
The following is a screenshot of my "Finder" application built as a Titanium desktop application. It's becoming more and more indistinguishable from the real thing.
Finally, I decided to give Bespin a whirl. Bespin is a new project from Mozilla that provides a code editor, complete with syntax highlighting, keyboard shortcuts, and the like, in a browser. However, unlike many previous attempts at providing this functionality, Bespin does it using HTML5 and the <canvas> tag. It, quite literally, implements text editing at the lowest level possible, by custom painting the editable text area using canvas APIs.
I opted to use Bespin's farily recent embedded editor component, so that I could integrate Bespin into my framework's editor interface. This functionality provides only the editable text area and syntax highlighting and the relevant keyboard shortcuts associated with that.
I found that Bespin provides a beautiful, responsive interface. It is still in an early stage of development, however. The experience in webkit is a bit more sluggish than in Firefox. I found that the theming portion of Bespin is still very much under development. It presently only supports three themes, white, pastels, or coffee. I found that the white theme didn't always respond when I attempted to modify colors.
I also disliked the custom scrollbar interface, and found myself wanting the scrollbars to match my OS's native UI.
Having mentioned the kinks, I think it's a marvelous step forward, however, and I can't wait to see what future improvements will bring. Yesterday I only had a plain textarea, today I have syntax highlighting.
Following is a screenshot of my Bespin experiment:
There are no comments posted at this time.
* All comments are moderated and are subject to approval.
Your comment will appear once it has been approved.
Posting multiple times will not expedite the approval process.