Am I crazy? (How) should I create a jQuery content editor?

Question

Ok, so I created a CMS mainly aimed at Primary Schools. It's getting fairly popular in New Zealand but the one thing I hate with a passion is the largely bad quality of in browser WYSIWYG editors. I've been using KTML (made by InterAKT which was purchased by Adobe a few years ago). In my opinion this editor does a lot of great things (image editing/management, thumbnailing and pretty good content editing). Unfortunately time has had its nasty way with this product and new browsers are beginning to break features and generally degrade the performance of this tool. It's also quite scary basing my livelihood on a defunct product!

I've been hunting, in fact I regularly hunt around to see if anything has changed in the WYSIWYG arena. The closest thing I've seen that excites me is the WYSIHAT framework, but they've decided to ignore a pretty relevant editing paradigm which I'm going to outline below. This is the idea for my proposed editor, and I don't know of any existing products that can do this properly:

Right, so the traditional model for editing let's say a Page in a CMS is to log into a 'back end' and click edit on the page. This will then load another screen with the editor in it and perhaps a few other fields. More advanced CMS's will maybe have several editing boxes that are for different portions of the page. Anyway, the big problem with this way of doing things is that the user is editing a document outside of the final context it will appear in. In the simplest terms, this means the page template. Many things can be wrong, e.g. the with of the editing area might be different to the width of the actual template area. The height is nearly always fixed because existing editors always seem to use IFRAMES for backward compatibility. And there are plenty of other beefs which I'm sure you're quite aware of if you're in this development area.

Here's my editor utopia:

You click 'Edit Page': The actual page (with its actual template) displays. Portions of the page have been marked as editable via a class name. You click on one of these areas (in my case it'd just be the big 'body' area in the middle of the template) and a editing bar drops down from the top of the screen with all your standard controls (bold, italic, insert image etc...). Iframes are never used, instead we rely on setting contentEditable to true on the DIV's in question. Firefox 2 and IE6 can go away, let's move on. You can edit the page knowing exactly how it will look when you save it. Because all the styles for this template are loaded, your headings will look correct, everything will be just dandy. Is this such a radical concept? Why are we still content with TinyMCE and that other editor that is too embarrassing to use because it sounds like a swear word!?

Let's face the facts:

I'm a JavaScript novice. I did once play around in this area using the Javascript Anthology from SitePoint as a guide. It was quite a cool learning experience, but they of course used the IFRAME to make their lives easier. I tried to go a different route and just use contentEditable and even tried to sidestep the native content editing routines (execCommand) and instead wrote my own. They kind of worked but there were always issues.

Now we have jQuery, and a few libraries that abstract things like IE's lack of Range support. I'm wondering, am I crazy, or is it actually a good idea to try and build an editor around this editing paradigm using jQuery and relevant plugins to make the job easier?

My actual questions:

• Where would you start?
• What plugins do you know of that would help the most?
• Is it worth it, or is there a magical project that already exists that I should join in on?
• What are the biggest hurdles to overcome in a project like this?
• Am I crazy?

I hope this question has been posted on the right board. I figured it is a technical question as I'm wanting to know specific hurdles and pitfalls to watch out for and also if it is technically feasible with todays technology.

Looking forward to hearing peoples thoughts and opinions.

UPDATE

I've decided I will have a go at this and will start a github project for it when I have something cool to look at. From there I'd be totally happy for any help that people have to offer. It'll be open source of course :)

UPDATE 2

I've made the project and outlined the objectives. Let me know if you want to join the project group as a contributor, but I'll get the basics up first so there's something to start with.

Here's the link: http://github.com/brendon/SpikeEdit

Update 3

Wow! I've found this project. What a cool idea! I'm getting in touch with him to see if he ever got anywhere with it:

http://www.fluffy.co.uk/stediting

Update 4

Ok, I got reasonably far. The biggest problems (like everyone always knows) is how to keep the code being generated in a reasonable state of affairs. WYSIHAT seems to have take on board the whole non-IFRAME thing, so I'm holding off to see how far that gets. They take the approach of just cleaning up the code at the end of the editing cycle. I think it should be cleaned on the fly otherwise you can edit yourself into a quagmire (I've done it a few times). When I have time I'll investigate some sort of homogenisation engine that could be plugged in to make the editing process behave as similarly as possible in all modern browsers.

Answer 1

I completely agree with your suggestion of an editor - markup and iframes are so 2001 :) The world is heading semantics so we need modern tools to edit content. (see my slides http://www.slideshare.net/draftkraft/aloha-editor-contenteditable-useable) I started the Aloha Editor (http://aloha-editor.org) more or less with the same intension as yours above behind. The utopia :-) in our case became more or less reality and we already have some software using it:

These are known to use Aloha Editor as main editor

• Typo3 (in next major version V5 http://latest.phoenix.demo.typo3.org/. Cool guys, huge opensource cms in EU. Around 500.000 users)

• Gentics Content.Node V5 (First know big production system using Aloha Editor. Customer with 16.000 users. http://gentics.com/Portal.Node/blog-detail/gentics/postings/company/Telekom-Austria-Group---communication-with-16-000-em.en.html)

These systems are known to have plugins

• Drupal (opensource cms https://github.com/evo42/aloha-drupal)

• Midgard (opensource cms http://www.midgard-project.org/discussion/developer-forum/aloha_editor-and_hrungnir_user_interface/)

• some other projects I have heard but I don’t know

We welcome any developer how wants to join, contribute, participate, feedback or whatever. We want to keep roadmap and development as open as possible for everybody. Feedback is welcome!

Answer 2

Ok, wow! These guys are doing exactly what I was thinking of:

http://aloha-editor.com/

I don't like their toolbar much but they're actual functionality looks great! I'll be keeping an eye on their progress :)