Preparing to Blog – Better Quicktags for Comment Entries

Author’s Note: There is zipped Javascript code that supports the information in this post. If you develop improvements, please email Mike and let him know of your efforts.

Click here to download the zipped Javascript code file and LGPL license (14 KB)

Most blogs provide some text explanation above the comment field for what HTML tags the commenter may provide in her response.  However, I’d seen some other sites that had some buttons that automated some of this process. I set out to add this capability to my site with two objectives in mind:  1) make it easy for the non-HTML user to format a post comment; and 2) keep options narrowed to what I thought was an appropriate subset of HTML format tags.

The WordPress Quicktags Facility

The internal WordPress post and page editor comes with what it calls “quicktags.”  These tags, and their explanations, are:

str

“Strong” – creates a <strong> tag that gives strong emphasis (read – bold) to your text

em

“Emphasis” – creates a <em> tag that gives emphasis (read – italics) to your text

link

Link – creates a hyperlink to a web address which you supply in the pop-up box that is activated by the quicktag. If you select text before you click on the link tag, that text will be used as the link text (the clickable stuff) that will be displayed in your post

b-quote

Blockquote – creates a set of blockquote tags that indent text on both the left and right margins. An example follows

This text is within a blockquote tag

del

Delete – deleted text, text that has a strikethrough line through it

ins

Insert – inserted text, text that has been inserted; marked with an underline

img

Image – this works in much the same way as the link tag, you enter the URL of an image into a pop-up box and the image will be inserted into your post

ul

Unordered List – this adds the opening tag to create an unordered list (bulleted) in your post

ol

Ordered List – this adds the opening tag to create an ordered list (numbered) in your post

li

List Item – this adds a single list item to either the unordered or ordered lists. This tag requires either the ordered or unordered list tags to precede it.

code

Code – text that is formatted in a monospaced font to differentiate between code clips and regular text

more

More – this tag adds a <!–more–> tag to your post, which puts in a “more . . . ” link and puts the rest of your post on another page

page

Page – this tag adds a <!–nextpage–> tag to your post, which continues your post on a second page

Dict.

Dictionary lookup – looks up the word you enter into the pop-up box at dictionary.com and opens the definition page in a new window of your browser

Close Tags

Close Tags – this closes any tags (str, em, link, b-quote, del, ins, ul, ol, li, code) that must be closed in order to stop the formatting from continuing down the page. Each tag also turns into a close tag sign (ul becomes /ul, etc.) to allow you to close that individual tag as well.

Alex King’s Expanded Javascript Quicktags

As an addition to either the existing administrator quicktags or for addition in formatting online comments, Alex King expanded this listiing and provided it in a LGPL-based Javascript download.  This Javascript Quicktags is up to version 1.2 and is the basis for what I incorporated on my site for formatting online comments.

My Modifications

While I liked this version, it had some limitations in meeting my objectives:

1. Too many buttons were provided; I wanted a simpler subset of format tools
2. None of the buttons had tooltips, so that it was hard to understand what some of them did
3. Some of the labels needed clarification
4. I wanted a ‘Preview’ option that would show respondents what their final comments would look like once posted.

The result was that I modified Alex’s starting code.  If you would like to install the same version I have on this site — see the comment field with its buttons below — download the file noted at the top of this post. It includes all of the license and installation instructions of Alex’s current 1.2 version with my modifications.

Future Efforts

I will work to add a preview capability so that the commenter can see her formatted comments before submitting the post.  Longer term, I want to install a limited format WYSIWYG editor, similar to what I am using internally with Xinha.

Author’s Note: I actually decided to commit to a blog on April 27, 2005, and began recording soon thereafter my steps in doing so.  Because of work demands and other delays, the actual site was not released until July 18, 2005.  To give my ‘Prepare to Blog …’ postings a more contemporaneous feel, I arbitrarily changed posting dates on this series one month forward, which means some aspects of the actual blog were better developed than some of these earlier posts indicate.  However, the sequence and the content remain unchanged.  A re-factored complete guide will be posted at the conclusion of the ‘Prepare to Blog …’ series, targeted for release about August 18, 2005.  mkb