For the past week I have been working on this custom JavaScript rich text editor for the CollegeHumor article writer. Our current editor is using FCKeditor, which has been decent but has only recently become compatible with all browsers. For the re-write we messed around with the ever so popular TinyMCE, which in my opinion I liked better then FCK. I found the problem with both of them to be customization and overhead. There’s a handful of other editors out there that we messed around with, but I found these two to be the most popular, have the best documentation and supporting community.

If you are going to use all of the features the full package offers, writing one from scratch is going to be a daunting task. Why re-invent the wheel? TinyMCE has a pretty sweet setup that lets you easily create themes and plugins. They even give you access to override some of the core functionality without touching the core files. In the CollegeHumor situation we are looking to customize almost every action and eliminate the overhead of the features we don’t plan to use. The CH article writer is clearly not one of the most visited pages on the site, but I cant imagine how it would perform if it was. These out of box editors are thousands of lines of JavaScript, tons of includes, graphics and html files. If you used something like this as the primary editor for say a large social site, it would be a waste of bandwidth and suffer from slow page loads on the client side.

So if you decide you want to code your own, Microsoft and Mozilla both have interfaces that ease creating custom rich text editors. For the basic features; bold, italic, justify, font size, etc. there is a single line commands that deal with the actual placement and HTML. Basically all it takes to get a super basic editor is an IFrame set to “design mode” and a few command buttons.

Microsoft execCommand docs
Mozilla execCommand docs
Browser Compatibility chart

If you end up dynamically generating the IFrame, beware of a quirk in Mozilla that requires the IFrame to be completely loaded before it can be set to design mode. The way I dealt with this was to put an event handler on window/load that triggers the design mode once I know everything has been downloaded. I have seen a few examples use short timers to set design mode after the IFrame was appended. I found this to work most of the time, but sometimes if the browser hiccuped an extra second it would try and add it before the IFrame was loaded, which threw an error.