A WYSIWYG Editor

As a small follow-up on an earlier post, I wanted to describe a simple methodology for building a rich-ish editor for your favorite web application. Let’s start, though, with the basic idea.

Why is this a big deal? Well, for most of us, it isn’t. When we use websites, we generally assume that the gnomes who edit and manage them use proprietary software solutions to update their content. Those more initiated folk will spit out names like Dreamweaver or and I won’t even link to it something far more disgusting like Frontpage. More involved users, however, know that most web publishing is done on things like this – blog software or CMSs. As it is often my business to build such beasties, I happen to know a lot about the latter. These are built by people like me, but almost never actually managed or edited by us. Instead, most websites you visit – from the New York Times to the Daily Kos are editing and managed by the content producers. These are the guys with BAs in English who wouldn’t know a tag from a dragonfly. A WYSIWYG editor is what makes that possible.

Old School

Websites from the 90s ROCKED

There are a few major options out there for these kinds of editors, and while most of them are decent, they’re all heavy. The most common, and the one I’ve generally used is MoxieCode’s Tiny MCE. Tiny MCE is neither tiny or Moxie. In fact, it’s brontasaurian by web-standards at close to 1MB, and it’s kind of ugly to implement. And while there are others both larger and smaller, they all suffer from the same grand problem – they’re too much or too little for my average client, and they seldom support the kind of custom solution I’m looking to implement.

Truly Custom What could be more custom than a few bold and italic links? Well, most of the time it’s a design issue. For example, my friend Bill edits a site I built called Dartmouth Undying whose purpose is to keep the “Dartmouth should never have gone Co-Ed” crowd from having too much power on the Alumni Council. Well, I designed a site for them that I thought was clean, elegant, green – everything Dartmouth is short of those fries over at the Hop. So, I used Moxie on the site and shortly ended up with crazy ugly… well.. bright colors and stars and dancing Yodas… well, practically. Why? Because he didn’t have, within his WSYWIG the design that I, in my infinite designerly wisdom, the styles that were meant for the site. And even if he had, he also had the myriad other things that that silly program did have – for instance, a stupid color picker. But now, I am happy to announce that I have one. Next post – the actual code and simple directions for those of you who might wish to implement the same.

Leave a Reply