We've built our own inline editor for Orbs, a website builder project which we posted to Hacker News last year. You can see it at http://www.orbs.com/. Basically, you just click on the content and the editor starts working in place. This version actually uses an iFrame but copies the CSS styles in so it works exactly like inline editing.

When we asked for feedback, there was a comment that was particularly interesting where the user said he'd pay for something like that if he could edit his regular website with it. Basically a CMS.

It was such a good idea that we built it and it's available at http://www.designhamster.com/. Basically, you just add a class="EDIT" attribute to any div you want to make editable. We plan on making a real post to Hacker News about it later. This version is actually making the DIV editable instead of an iFrame.

There is a live demo on that page where you can click on a box with some text in it and try it out on the DH home page; however, to get a real feel for it, I'd suggest using the free signup so you get an idea how it works in a page.

Note: DesignHamster is live and accepting customers but we aren't going to promote until we improve the interface. This will be done in 2 weeks. It is completely usable now though for projects.

So, you are using Aloha editor. It's kind of cool but still buggy (I'm sure this will be cleaned up) and I understand it's quite heavy. I think we did ours in 66KB + mootools.

If you are wondering, making an editor from scratch is HUGE work. To get bold, italic, headings, bullets, and everything else that is built into the browser's execCommand list for working with contenteditable gets you a lot of cool stuff for almost zero pain. It's fun, enjoyable and fast to build. This gives you the false impression that the rest will be just as easy. Unfortunately, not even close.

Every browser is different is just the beginning. There are bugs galore in each browser. Some of the worst offenders are from our favorite browsers like Chrome and Safari too. Try and backspace from a paragraph into a heading and you'll get these weird inline SPAN that fake the formatting of the H1/P tag without actually being one. In many instances, IE has the sanest behavior. To fix this, we override the handling of delete, backspace and enter depending on the browser. If the browser handles it correctly, we don't touch it. But if it doesn't, we modify the DOM directly.

In other areas like selecting an image, IE uses a completely different selection object type for images than text. This has to be handled specially too.

Many commands not built in require manipulation of the DOM. But unfortunately that kills your UNDO. So if you want to keep undo working, you have to build your own UNDO stack.

Then there are just plain weird bugs. I think there was one where if you have an image in a P tag with nothing else, in one of the browsers, your cursor can't move passed it. So to fix it, we had to insert an invisible space.

For us, the editor is one of the most valuable assets of the company which is why we have spend, probably over a man-year working and improving our editor. We are getting better at it but it's still not perfect. We want the editor to be a prime differentiator of our product so we are willing to put in the work; however, be warned that working directly on creating an editor is a lot of work.