The Label
“Tasty! No Trans-Fats.”
I’ve now worked with a number clients who have a taste for a “rich text” editor
experience. Each time, the team initially looked in to using an
off-the-shelf package, e.g.:
Each of these client projects had fairly basic needs.
Pretty much everyone wants “bold”, “italic”, “underline”. Throw in bulleted
and numbered lists and perhaps a few other trinkets and you’ve pretty much
covered the use cases.
It turns out that the existing packages are generally tricky to integrate and
modify or configure per your particular needs. This makes sense. A full-blown
Javascript RTE package needs to have capabilities far in excess of anything
a given project requires, simply in order to meet every project’s
requirements. You end up with a massive library that is not trivially
integrated into your site. What to do some TDD/BDD on the RTE interaction
with your page? Good luck.
So, I’ve generally suggested that we roll our own.
I know, crazy. Why write something new and custom when so many others have
already solved all of the issues with, for example, cursor movement and text
editing and command handling (e.g., making the text “bold”) and image
placement, and…?
Well, it turns out that all of that
behavior is already built in to the browser. Yes, my browser, your browser.
Pretty much every browser you need to care about1.
On top of that, the basics are extremely simple.
To many, this may not be news at all. The basic capability has been around since MSIE 5.5 was released in 2000. On the other hand, I’ve worked with a number of very smart and seasoned web developers who were unfamiliar with the extent to which it is the browser, rather than the libraries, that has taken care of the hard parts.
Ingredients
What you’ll need to make this work2:
// enable editing:
document.contentEditable = true;
document.designMode = 'on';
// make something bold:
document.execCommand('bold', false, []);
It’s pretty much as simple as that. Give it a try: paste the following
snippet into your browser’s address bar, hit enter, and edit text or resize
images on this page to your tummy’s delight.
javascript: function enable_DM() { document.contentEditable = true; document.designMode = 'on'; }; enable_DM();
Preparation
So, with those ingredients we can make quite a mess of the page we’re visiting,
but we’ve hardly created a delicious RTE. To go the next step, we need a way
grab the HTML representation of our edited content to send with a form
submission.
The basic idea here, which is what every editor out there employs,
is to embed an <iframe />, the document of which is editable, and when
appropriate copy the HTML of that document to a (likely hidden) textarea within
your form.
Why an iframe? There are two important reasons:
- You probably want to protect the look and behavior of your edited document
from the styles and scripts of the rest of your site. - Until version 3, Firefox only supported
designMode, which is applicable
to the document, but not to an element within your page.
There are slight browser differences that will come in to play, e.g. MSIE’s
IFrameElement.document property versus Firefox’s (and the W3C standard)
IFrameElement.contentDocument. As long as your editor remains fairly simple
these intricacies will cause very little trouble.
I’ll leave it to you to hook things up to your liking, but will toss in this
morsel: On a current project, we’re using a home-baked RTE which, from 100
very-nicely-formatted lines of Javascript (not counting the supporting
jQuery and Disco
libraries), is providing…
- DOM building of the iframe and command toolbar (
<ul /> with “buttons”), etc. - Document editability
- Registration and handling of 8 commands (e.g., “bold”, “italic”, “indent”)
- Content transfer to-and-from an associated textarea
- Additional helpers (e.g., get the currently-selected text as HTML)
Tasting Notes
- 1 My apologies to visitors using a
specialized browser for accessibility. - 2 Setting
document.designMode
should be enough, but there are reports of discrepancies in MSIE’s handling
of the two.
Shopping List
