YUI Rich Text Editor for blog comments

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.

YUI rich text editor blog comments

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.

10 comments

Commentary on "YUI Rich Text Editor for blog comments":

  1. BillyG on wrote:

    This is a test, this is only a test.I’m finally got one button to work anyway.

  2. Craig on wrote:

    I had trouble with the Javascript not loading on my first try.

    It would be nice if the focus went back to where you were typing after you choose a style above, nice concept, but they need a little more work before I want to use it.

  3. hamid reza on wrote:

    So. It is cool!However, the XHTML compliance code is something I would want. And I have just a feeling like left-handed people facing these kind of tools, because our language is written from right to left and I guess I need a lot of work to do, if I decide to make such libraries compatible with my blog.

  4. Steven Holloway on wrote:

    Just wanted to say thanks Niall, I was stuck on updating the textarea element onsubmit. Your implementation did exactly what I needed. I have generally got pretty good mileage integrating YUI with my Rails apps and this RTE is a particularly nice addition.

  5. Trivesh Hans on wrote:

    It was great i did it the way you said and it worked for me Thanks

  6. Sub on wrote:

    Before I start trying it out… I have a page with multiple textareas (which all have the same name=”…” identification.Can the editor be loaded above every textarea? Or can it even be loaded once on a static sidebar and entering the text where the cursor is?cherrio!

  7. Ben Tremblay on wrote:

    Niall I’ve been following you since, well, a long time … and you’ve done a jim-dandy job here, so I’ll put this as a question. (And that may be baseless; I mighta missed something.)

    No Edit Source / View Code mode? I’m not anti-gui, but I like getting into the guts to tweak things.

    Did I just not see it? Is there some snag that makes this difficult?

    • Jørgen on wrote:

      ben and Marjorie:
      Take a look at the Code Editor example in the YUI documentation. It should help you create a HTML editor.

  8. Marjorie on wrote:

    Also shocked by no HTML source edit…. please, can someone reveal how to do this?

  9. Daren Dahl on wrote:

    Thanks! With your explanation and examples I was finally able to customize my YUI Rich Text Editor toolbar. The examples on the YUI Developer site just left me confused.