Live Comment Preview Added

I've been to a few sites lately that have live comment preview and found that it helped me write better comments. These implementations use a textarea element to input your comment and displayed an HTML comment below the textarea element. Not as nice as a full WYSIWYG editor, but much lighter in weight and easier to implement in a wide variety of browsers. With that in mind I thought that it would be a good idea to implement live comment preview on my site.

The first thing I did is determined what DominoBlog, my blogging system does with a comment. I found out that it converts < symbols to &lt;, > symbols to &gt;, [b] into <b>, [/b] to </b>, [i] to <i>, [/i] to </i> and anything that starts with http:// to { Link } with the word link an href to the URL. When parsing the URL, DominoBlog looks for a space character or the end of the line to determine the end of the URL. Each line is turned into a paragraph.

With that in mind, I looked to see what others were doing. I liked the code that Robert Nyman has and decided to use that as a starting point. His code uses a regular expression on the onkeyup event to replace strings of text like the new line character (\n) with HTML, in this case a <br>. The replace expression calls an anonymous function that replaces new lines with <br> and smiley character sequences with an appropriate image. It was light weight and I think just what I needed.

However, the code had to be changed to reflect what DominoBlog will do with a comment, which seemed pretty easy at first. All I had to do was change the regular expression and add the replace code to the anonymous function. There's only one small problem, I'm not very good at regular expressions. Dealing with converting <, >, [b], [/b], [i] and [/i] was easy. I changed Robert's regular expression from:

/\n|(:|;)\-?(\)|\(|D)/gi

to:

/\n|\[b\]|\[\/b\]|\[i\]|\[\/i\]/gi

Converting the URLs was more difficult. As always, I started out with someone elses work and finally ended up with:

/https?:\/\/([-\w\.\#\?\&\%\;\=\-]+)+(:\d+)?(\/([\w\/_\.\#\?\&\%\;\=\-]*(\?\S+)?)?)?|\<|\>/gi

It works, though I'm sure someone with more regular expression experience could do a better expression. Then it was just a matter of changing the anonymous replace function.

function (strMatch, p1){
	var strReturn = "";
	if(strMatch == "\n")
		strReturn = "<\/p><p>";
	else if(strMatch == "<")
		strReturn = "&lt;";
	else if(strMatch == ">")
		strReturn = "&gt;";
	else if(strMatch == "[b]")
		strReturn = "<b>";
	else if(strMatch == "[b]")
		strReturn = "<b>";
	else if(strMatch == "[\/b]")
		strReturn = "<\/b>";
	else if(strMatch == "[i]")
		strReturn = "<i>";
	else if(strMatch == "[\/i]")
		strReturn = "<\/i>";
	else if(/^http/.test(strMatch))
		strReturn = "{ <a href=\"" + strMatch + "\" title=\"Link: " + strMatch + "\">Link</a> }";
	return strReturn;
}

I start the innerHTML with a <p>, add the changed textarea, then add a </p>. To add live comment preview I use:

addEvent(window, "DOMContentLoaded", function() { ... });

You can find this function at DOMContentLoaded for Browsers, Part II. If you don't want to use events.js you can use the onload event. The comment textarea has an id of "textcomment" and the receiving preview HTML element has an ID of "commentPreview". If those two elements exist then Live Comment Preview is added to the page. Here's the final version.

addEvent(window, "DOMContentLoaded", function() {
	var oCommentField = document.getElementById("textcomment");
	var oCommentPreview = document.getElementById("commentPreview");
	if(!(oCommentField && oCommentPreview)){
		return;
	}
	oCommentField.onkeyup = function (){
		oCommentPreview.innerHTML = "<p>" + this.value.replace(/https?:\/\/([-\w\.\#\?\&\%\;\=\-]+)+(:\d+)?(\/([\w\/_\.\#\?\&\%\;\=\-]*(\?\S+)?)?)?|\<|\>|\n|\[b\]|\[\/b\]|\[i\]|\[\/i\]/gi, function (strMatch, p1){
			var strReturn = "";
			if(strMatch == "\n")
				strReturn = "<\/p><p>";
			else if(strMatch == "<")
				strReturn = "&lt;";
			else if(strMatch == ">")
				strReturn = "&gt;";
			else if(strMatch == "[b]")
				strReturn = "<b>";
			else if(strMatch == "[b]")
				strReturn = "<b>";
			else if(strMatch == "[\/b]")
				strReturn = "<\/b>";
			else if(strMatch == "[i]")
				strReturn = "<i>";
			else if(strMatch == "[\/i]")
				strReturn = "<\/i>";
			else if(/^http/.test(strMatch))
				strReturn = "{ <a href=\"" + strMatch + "\" title=\"Link: " + strMatch + "\">Link</a> }";
			return strReturn;
		}) + "<\/p>";
	};
});

It's not an editor for large documents, but for comments which are usually small, I think it's just fine.

  1. Download events.js
  2. Download commentPreview.js
  3. Add the two javascript files to DominoBlog
  4. Add the following script lines to your templates.
    <script type="text/javascript" src="../javascript/events.js"></script>
    <script type="text/javascript" src="../javascript/commentPreview.js"></script>
    
    
  5. In your comment form make sure that the textarea field contains an id="textcomment"
  6. Add a <div id="commentPreview"></div> at the end of your form.
  7. Add CSS to style the div as a comment.

You should now have live comment preview.

Tested with Camino 1.0, Firefox 1.5, IE 6.0 Konqueror 3.4.0, Opera 9.0, and Safari 2.0.

7 Comments

Gravatar Image1. Posted at 8/8/2006 9:34:46 PM by Eric Mack

This is a test of live comment preview.

This is in bold and this is italic .

Cool!

test from { Link }

Gravatar Image2. Posted at 8/11/2006 4:25:26 PM by Tanny O'Haley

Eric,

Thank you for testing. I added the formatting buttons yesterday. I think that it is a little confusing with the code created by the url, but at least you can put in your own text for an url. Just select some text and click the URL button.

Tanny O'Haley's Weblog

The code even adds http:// in front of an url if you don't provide it.

Gravatar Image3. Posted at 8/19/2006 3:37:16 AM by matt

test

Gravatar Image4. Posted at 9/1/2006 6:25:13 AM by Brad

I noticed that you did some modification to the Simple Calendar Script that is floating around. I'm a VB/ASP.net developer, so My java script skills are pretty bad. So heres my question: I have the simple calendar script in one of my aspx pages. I tried to add a static menu like this one: { Link }

But when I added the menu script to the page, the simpleCalendar part the calendar displays an error: 'g_Calendar is null or not an object', and does not popup the calendar. I moved the : <script language="JavaScript" src="simplecalendar.js"></script>

below the body tag and the calendar starts to work again, but the menu is not static anymore. I'm Java stupid, and help would be appreciated.

Thanks!!

Gravatar Image5. Posted at 9/2/2006 9:58:20 AM by Tanny O'Haley

Hi Brad,

Without looking at the source code it is not possible to debug your problem. With that said, the first thing I would do to debug a problem like this is to check the structure of your HTML. Does everything have an end tag? It is best to have a good foundation of well structured HTML. The second thing I would do is trash that menu system and use a better menu system like Suckerfish menus.

Please, find a few good books on web standards and unobtrusive javascript and use those practices, it will really help make your life easier when developing web applications.

Since you left an incomplete email address I cannot send you this information directly. I hope you come back and find an answer.

Gravatar Image6. Posted at 12/23/2006 7:37:36 PM by Melissa

I appreciate that you keep your blog going and allow comments. To me feedback is an interesting part of a website.

Gravatar Image7. Posted at 9/4/2009 7:20:46 AM by denra

Being a freshman in blogging, I really appreciate such resources where people write constructive posts about useful things in a good understandable manner. I've already found quite a lot of interesting articles by { Link Removed } rapidshare search engine. Thanks God, I've also found your blog.

Add a comment

Discussion for this entry is now closed.