Embedded Rich Text Editors

The technologies the web relies upon have steadily advanced, new more powerful tools have been created, and thanks to the ever-enduring Moore’s law we can squeeze a great deal of functionality into a web page. There was a time when embedding a rich text editor in a page was an excessive and extravagant feat, yet today there are a plethora of simple ways to do it. TinyMCE and FCKEditor are the most popular, but many others exist (including the impressive YUI editor which I did not know about until today).

Embedded rich text editors are great tools but they may not be suitable for the discerning geek. In general these editors have a reputation for creating messy and verbose source code. How important this really is has been and will be a subject of debate for some time, but there is no question that clean, standards-compliant code is a good thing to have. When it comes down to it, I tend to think that if you can do something the right way with a reasonable amount of effort, why sacrifice correctness for a little bit of convenience?

Lightweight Markup Languages

When HTML is too verbose or complex for what you really need to accomplish, and rich text editors don’t give you the quality of code you’re looking for, you’re left with lightweight markup languages.

There are a number of different approaches to lightweight markup, in fact if you follow the Wikipedia link above you’ll possibly find more than you really care to know about, but there are only two that have emerged as the preferred choices among the current generation of web developers: Textile and Markdown. Markdown is great, but for the sake of this article I’m going to focus my attention on Textile, which is currently my favorite.

Textile relies on simple markup that is easy to edit in a plain text editor, or a simple textarea on a web form. A major benefit of Textile is that it is also easy to read in it’s unprocessed form, so editing it is relatively painless and not nearly as confusing as editing raw HTML. The syntax is easy to pick up, and new users can typically start authoring comment with very little introduction.

Here is a quick example of Textile code:

h3. Sample

This is a sample paragraph, complete with *bold* text, _italic_ text,
+underlined+ text and even a "link to google":http://google.com/.

For kicks, here is a second paragraph.

And this is what it looks like when displayed:

For a complete list of Textile samples view the example-based reference.

One of it’s greatest strengths, Textile adds a great deal in the way of proper typography. For most of the web, trademark symbols are left as TM, hyphens are substituted for en-dashes and “dumb” quotes are used instead of smart quotes. With Textile these nuances of type are easy to handle with very little effort. A (TM) is automatically converted to ™, a single hyphen is converted to an en-dash (two hyphens for an em-dash), and straight quotes around phrases are converted to smart quotes. With minimal effort you get a significantly more professional result.

Conclusion

Lightweight markup is not without it’s shortcomings. Rich text editors often provide enough visual aides to get people going with little or no introduction, and as I stated before the value of clean HTML in a web page is sometimes debated. In addition, the nature of rich text editors leaves the door open for more powerful features, such as built-in flickr browser or point-and-click YouTube video embedding. All the same, for most tasks, for most sites, I believe that lightweight markup languages are the best option.

Links of Interest

• Textile:
  • Wikipedia entry
  • Homepage and playground
  • Example-based reference
• Textile Alternatives
  • Markdown
  • reStructuredText
• Embedded Rich Text Editors
  • Kupu
  • TinyMCE
  • FCKEditor
  • YUI Rich Text Editor

I’ll state it here for anyone who is searching for answers after 2 hours of confused testing. To use FlashVars you have to (in addition to what the CS3 docs say) add two arguments to the AC_FL_RunContent call in your HTML, specifically 'FlashVars' and 'key=value&key2=value2&...etc' (you know, the actual vars).

Granted, to any seasoned Flash developer this gotcha is probably known, but as this is the first ActionScript I’ve touched in a long time I was bitten.

Edit /etc/hosts to give localhost some extra aliases:

127.0.0.1       localhost local1 local2 local3 local4 local5

Then tweak apache config to add a few VirtualHosts (in this case in my home dir /Users/tvon):

<virtualhost *>
    ServerName local1
    DocumentRoot /Users/tvon/Sites/local1
</virtualhost>
<virtualhost *>
    ServerName local2
    DocumentRoot /Users/tvon/Sites/local2
</virtualhost>
<virtualhost *>
    ServerName local3
    DocumentRoot /Users/tvon/Sites/local3
</virtualhost>
<virtualhost *>
    ServerName local4
    DocumentRoot /Users/tvon/Sites/local4
</virtualhost>

Now when I want to work on a site, say example.com (assuming it lives in the example.com directory under /Users/tvon/Sites) I symlink it to an available local alias, e.g. ln -s example.com local1 and I can access it as a root site at http://local1/.

Not very fancy, but it makes my life a little easier.

alias rmpyc="find . -name '*.pyc' -print | xargs rm -f"

(Please test with echo, and watch out for typos, rm -f can be a nasty bedfellow.)