This blog’s comments are now enhanced with the YUI Rich Text Editor. I’m already familiar with the YUI JavaScript library, so when this new feature was included last week’s 2.3 release I decided to try out a progressive commenting enhancement. In this post I’ll walk you through how to implement YUI‘s Rich Text Editor on your own blog with comment-specific features.
Why the change?
Leaving a blog comment can be a mysterious task. Is HTML allowed? If so, what elements are permitted? Maybe I should just paste the full link URL into the comments just in case, and hope the blog software either converts it into a link or a reader might copy and paste the text into their browser location bar.
I wanted to take some of the guesswork and complexity out of leaving a comment and encourage more relevant citations. I also wanted to make my comments field feel a bit like a miniature blog entry and most modern blog software today includes WYSIWYG editing. Perhaps enhancing the comment field could make bloggers feel at home even when they are away from their admin interface.
Progressive enhancements
The new rich text editor is only shown to capable JavaScript-enabled web browsers. I swap out the standard comment textarea with an entirely new sub-page containing the editor, and save any new content back to the textarea before submitting the form. If a site visitor has JavaScript turned off, or for some reason the JavaScript throws an error in their browser, the regular non-enhanced comment form is still available and fully functional.
What’s included
I customized the editor with buttons I think might be useful within blog comments. You can add bold, italic, or underlined text, add a link, or include a remote image at the size and text-wrap you desire. You can also insert an ordered or an unordered list with the click of a button. All changes appear live and some features include keyboard shortcuts.
Implementation details
If you’d like to implement a similar feature on your blog you’ll need to include some YUI JavaScript files, a CSS skin for button and control styling, and some local JavaScript to customize the editor, instantiate, and save its content.
YUI libraries
The rich text editor is part of the YUI JavaScript libraries version 2.3 or above. The libraries which can be uploaded to your blog’s web server or served directly from Yahoo’s geo-distributed server farms. Your text editor has a few YUI dependencies you will need to load before it reworks your entry pages.
- utilities
The utilities file is a roll-up of the YUI core and all the YUI library utilities into one download.
YUI core consists of the YAHOO global library, the DOM collection, and the event utility. This file provides cross-browser compatibility for common tasks such as selecting and altering elements on a page or listening for events such as a mouse click or window scroll.
Other loaded YUI utilities include support for animated controls, asynchronous connection management for form submissions, drag and drop for image movements, and more.
- container
- The container library helps the rich text editor display tooltips, action panels, and other manipulation tasks.
- menu
- The menu library powers your toolbar and drop-down menus.
- button
- The button control creates all of the buttons and checkboxes inside the text editor and handles their various events.
- editor
- The rich text editor we’ve been waiting to instantiate.
Customize your button bar
The default YUI Rich Text Editor includes font selectors, subscripts, superscripts, color wheels, highlighters, alignment, and indentation controls that are a bit overkill for a simple comment field. I decided to customize the editor toolbar with only the buttons I care about.
My custom editor configuration instantiates a new editor with specific configuration options. I turned off the dompath status bar (too geeky) and set the height and width of the editor to match my CSS for the textarea The editor will try to guess the appropriate height and width based on your textarea‘s existing rows and cols markup, if present, or you can explicitly define your editing area.
Next I define three button groups: textstyle, lists, and insert. Each button’s listener, tooltip, and behavior is defined as a JavaScript object.
{
type: 'push',
label: 'Bold (Ctrl Shift B)',
value:'bold'
}In the example above I defined a button with a push behavior, a text label, and a built-in action value to alter the editor.
Choose a skin
You’ll need to skin your editor to avoid ugly output. I’m using Sam Lind‘s skin by including a CSS file hosted by Yahoo! in my head and a body class value of yui-skin-sam. All button graphics are served from a single image using sprites, making the skin a pre-optimized package.
Consider a submit handler
All markup entered into the editor needs to be transferred back to your textarea before submitting your form. You could define handleSubmit at instantiation, but there are currently some issues with YUI 2.3 and proper handling within Safari.. I decided to call the saveHTML method during my form‘s onsubmit instead.
Beta software
The YUI Rich Text Editor is currently in beta, which means things may not quite work the way you’d expect or prefer and there may be major changes to the library in the next YUI release. You might also consider alternate rich text editing JavaScript libraries such as FCKeditor, the dojo editor, or TinyMCE.
The YUI Rich Text Editor does not output XHTML 1.0 Strict compliant markup, even in “semantic” mode. If you are strict you still might have some post-processing work to keep your entry pages compliant.
Summary
Progressively enhancing my comments field with a rich-text editor and minimal button options could encourage richer content markup. It also looks pretty slick, differentiating my blog comments from the countless other textareas found across the Web. I’m already familiar with YUI libraries, so implementation was easier than starting over again with something new and I could re-use the base libraries loaded on my pages for other future features.
In short: the comment form has changed and hopefully it’s for the better. If you’re interested in implementing a similar rich editor on your own blog, just view the source and non-minified examples for a quick setup.