October 3, 2007

HTML editors and some help testing FCKeditor 2.5

Historical

Rob Mueller

Founder & CTO

For quite some time now, we’ve wanted to change the HTML editor that the FastMail web interface uses for the compose screen when you’re in HTML editing mode. By default, we’re still using the very old htmlArea, although you can choose to use either Xinha or FCKeditor from the Action menu (you have to switch to text editing mode first to make the change, but then any change you made is sticky for the session, and across logins).

The reason we’ve stayed with htmlArea is that we’ve been waiting for a compelling reason to upgrade. htmlArea continues to work, and while the other HTML editors have been developed and have had features added, they’ve also had additional problems and bugs grafted onto them as well that have in many cases negated the additions.

I’ve been keeping an eye on Xinha and FCKeditor (and also other editors like Tiny MCE), and have been waiting for the right release to upgrade. FCKeditor 2.4 was looking very promising. One of the features I really wanted to use was the new EnterMode option which allows you to control if the Enter key generates either a
, a

or a

tag. This turns out to be surprisingly important because of the way HTML works versus the way people expect WYSIWYG style editors to work.

The problem resolves around two conflicting observations

When people hit Enter, they want the cursor to drop directly to the
next line and not leave any vertical gap
When people hit Enter, they expect a paragraph of text to created
and treated as a “block” of text for block level formatting items
(eg indent, right-to-left display, etc)

The problem is that in HTML, to create a new “block” of text, you use

markers around the text. Unfortunately by default browsers includes some vertical spacing between blocks of paragraph text. So if you set EnterMode=p, then when you hit Enter, it does create a new

block, but also the cursor moves down what appears to be around 1.5 lines, rather than directly to the next line. Now you can explicitly set the spacing on paragraphs so that it bunches paragraphs directly underneath each other with no gap, but you need to apply that to the whole document, which means that if you reply to existing text that contains

tags, those will all be bunched next to each other as well, even if that’s not how the original author intended it and can make it hard to separate out paragraphs. Basically there’s a disconnect between the semantic nature of the HTML and the way it’s displayed.

Going the other way, if you use
markers, these don’t create new “blocks” of text, they merely designate points in the big block of text where to insert a line-break. While this might sound fine, it creates problems when you then try and perform actions on blocks of text (eg center, or turn into a list, or change to right-to-left text display, etc). Despite these issues, the fact that inserting a
moves the cursor immediately to the next line which is what most people expect, is the reason most online HTML editors use this approach.

The final approach is to use

markers. In fact, div markers are an excellent compromise. They do create new HTML blocks making formatting easier, but by default don’t include any extra vertical spacing, so they create the “cursor drops down only one line” effect. Interestingly, the HTML editor in Outlook Express has always used

markers when using the Enter key, and in most cases it creates exactly the effect people want.

So when FCKeditor 2.4 added the ability to set EnterMode=div, I thought this was going to be a great solution. Unfortunately it turned out that EnterMode=div was very buggy, making it basically useless in 2.4.

It appears that FCKeditor 2.5 (which is currently in beta testing) has had a lot of work into fixing the text entry and tag generation bugs. I’m hoping that this release will be stable enough to finally replace htmlArea. Additionally FCKeditor 2.5 includes Opera and Safari support, so users of those browsers should be able to do HTML editing in the web interface as well.

I’m hoping people can give the 2.5 beta release a try, and I’ve started a forum thread (http://www.emaildiscussions.com/showthread.php?t=50374) where people can provide feedback so I can get a general sense of good this release is looking.