Live Comment Preview In Three Easy Steps
Several people have complimented the live comment preview used in my skin. Try leaving a comment and notice the preview mode underneath. It now even supports a few HTML tags. Unfortunately I haven’t updated the comment page to tell you which tags are supported. Doh!
I did not write the original script. It was borrowed from the Asual Theme for blojsom and used in our Piyo skin.
Now, by simply referencing this script, you can add live comment preview to any blog in three easy steps.
- Reference the script.
- Add the CSS class
- Add the CSS class
textarea is of course the form input into which the user enters a
comment. In ASP.NET it would be a
TextBox control with the
property set to
MultiLine like so:
<asp:TextBox id="tbComment" runat="server"\ Rows="10" Columns="40" width="100%" Height="193px"\ TextMode="MultiLine" class="livepreview"></asp:TextBox>
<div> is the tag used to display the preview. There is a good
reason to choose a div as opposed to allowing a
<p> which I will talk
about later. In my blog, that
div already had a CSS class applied so I
simply added the
livepreview class like so:
<div class="commentText livepreview"></div>
And that’s it!
Well not exactly. I fibbed just slightly. There is actually a fourth step for the discriminating blog author. If you crack open the script, you’ll notice the following section on top:
var subtextAllowedHtmlTags = new Array(7); subtextAllowedHtmlTags = 'a'; subtextAllowedHtmlTags = 'b'; subtextAllowedHtmlTags = 'strong'; subtextAllowedHtmlTags = 'blockquote'; subtextAllowedHtmlTags = 'i'; subtextAllowedHtmlTags = 'em'; subtextAllowedHtmlTags = 'u';
You can edit that array to specify your own tags. Note the preview only
currently renders tags that contain something between a start and end
tag. So for example,
<b></b> won’t show up, but
For example if you add
hr to your list of allowed tags,
<hr /> won’t
get rendered properly in the live comment preview. It will get rendered
properly when it is actually posted as a comment. This may change in a
Now it is up to you to apply some CSS styling to actually make the preview look good.