Early this year I experimented with the contenteditable tag in html as a way to build a web-based text editor with local autosave and the ability to play with multiple files that I called Cowriter. It's designed for writers, so there are few formatting options. For the most part it was to learn about how localStorage and local database queries work in HTML5. But the cool thing is what I did after this.

One of the neat things about this editor is that it uses as much of the native OS and browser functionality as I could get it to do, like copy, paste and undo. If you open a document, for example, it opens into a new tab. There is no need to save, as it will save automatically all the time. If you accidentally open a document in two separate tabs and edit in one tab, when you switch to the other tab, your changes are automatically sycnchronized thanks to localStorage.

Another neat thing is the text search and replace function. I had a fun time playing with string parsing as this sort of feature in HTML is very very tricky. What if you want to search for a string that crosses between a style tag like bold or italics? So you have to ignore the tags. But when you replace it, you don't want to ignore the tags anymore. What's a parser to do?

I ended up using a trick: if you add an anchor tag, the browser itself will figure out how to nest your remaining text properly. Then I just change that anchor into whatever text I wanted.

You can move a file into a virtual local file structure, complete with subfolders. At one point I even had these files saving out to Dropbox via their API, so you could switch between different devices.

One of my favorite things is hidden in a submenu: the ability to add footnotes. These notes pop up into a little window that goes along wherever you place it into the document. 

When I finished learning about the capabilities of HTML5 localStorage and all the different things you can do with contenteditable spaces, I realized that with a bit more massaging, this would make a pretty kick-ass in-place true WYSIWYG editor.

So I played with it, modified it, added a bunch of neat functionality like drag-and-drop image uploading, in-place image resizing and positioning, the ability to add links, and then hooked up a dead-simple back-end PHP CMS with a bunch of tiny API calls to update the pages. Even threaded, moderated comments!

It's not vaporware, but it is pretty beta. I've got a few client websites using various iterations of it and they're working pretty well. A few of them even upload and place videos. My own website here uses the system. I'm happy with how it turned out, but there's a fair bit of work needed to get it to a place where it's marketable or usable by other people.

Cowriter is still a toy, but it's a neat toy. My favorite part was using unicode characters rather than icons in the buttons. There isn't a single image on that site, all unicode and css!