Building a better WYSIWYG editor

Been a busy week, a short update till we have a chance to write up the other happenings:

We rely very heavily on a WYSIWYG editor ["What you see is what you get"] to edit the actual webpages – the client needs to edit the page without understanding the code that is modified by his changes.

This WYSIWYG was written by us about two months ago, and modified heavily last month.  This week, we finally sat down to rewrite from scratch to handle all of the improvements we wanted to shove into it.  It is quite a bit shorter and more complete now, and we hope to have it out the door by the end of the week.

A note to explain why we decided to write our own, especially considering our policy of trying to use third party code whenever possible :

There are many hundreds of WYSIWYG editors out there on the web, ranging from open source to thousands of dollars.  By far, the two most popular are TinyMCE and one called FCKEditor (by Fred Knabben of course).  Both are open source, huge bulky beasts that will slow down any site that relies on them.  For all their weight, neither has essential features such as image upload.

A ways back, a fellow Mootooler named Cheeaun posted a really tiny editor (<10k) for Mootools that was designed from the ground up to be small, simple, and cross platform.  He called it MooEditable, and he did a really great job.
Except, he wanted it simple, and some important stuff was missing.
Except, he didn’t want code from others, and ignored corrections and design enhancements made by the other devs.
Except, he really doesn’t have the time to develop it himself.

This has created a fair amount of frustration, and I know of at least four forks to his project, and I haven’t gone looking.  [We started from the ground up, but have used his code for inspiration and to find gotchas].

Also, there is also one really, really annoying issue that has grated on me heavily, and I really thought it should be corrected.  Evry single one of the editors I have looked at (including MooEditable) loads the text to be edited into an iframe.  An iFrame is essentially a tiny browser window that sits within your web page, into which other pages can be loaded.

Since the early days of the internet, this has been necessary, since it was not possible for the browser to give you control over just one small section of the page, and the site managers didn’t want you editing the whole page, so iFrame it was.

The problem is that when you load one section into an iFrame, you lose all formatting for that section, and when you try to port it back into the page it doesn’t look like what you thought it would, so you don’t really get WYS.

It is no longer the early days of the internet.  Nowadays, not only is page manipulation possible without an iFrame on all modern browsers, it is even supported by Internet Explorer.  [OK, their implementation is very different, but it still mostly works.]  And while there are still bugs going around, it is far better than editing the page within a frame.

So, there was no choice but to build our own.  I am hoping we can get some of the other forks to look at our work and get them to help us develop it.  Because, as always, we welcome and encourage your help.