Textpattern tips, tutorials and code snippets

Live preview of comments

Because a friend of mine needed to restore the “Live Preview” feature (an old one based on the orphan nhn_livecommentpreview plugin) for the comments on his website, I found a jQuery solution with the help of this great article.

  1. Download the livepreview.js script from here

First of all, to parse the textile input from the comments, you need to create a javascript file named livepreview.js on your site. In the example below, I have placed the file in a /js folder in the Textpattern root directory.

Then, add this to the bottom of your page template (just before the closing </body> tag):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<txp:site_url />/js/livepreview.js" type="text/javascript"></script>
<script type="text/javascript">
// Live Comment Preview jQuery function
var $comment = '';
$('#message').keyup(function() {
$comment = superTextile($(this).val());
$comment = $comment.replace(/\n/g, "<br />").replace(/\n\n+/g, '<br ><br />').replace(/(<\/?)script/g,"$1noscript");

In the code above, my textarea tag has got an id named “message”. Adapt it for your needs.

Finally, You just need now to add a recipient to receive the live preview comments into your page template:

<div id="previewcomment" title=" Preview of your comment compatible Textile "><p style="color:#bd3c25">Instant Preview of Your Comment:</p></div>

The div’s main ID above must reflect the container in the jQuery script.

Use CSS styles to position the container where you want.

That’s it Folks!

6 Comments Comment feed

This is a neat tip — thanks!
You guys should start uploading a small non-functional demo page for making it even easier.

Keoshi. i’ll post a link to a demo in few days.

Here is the demo (a quick draft one ;)

Hope it could be useful


Amazing. Truly, the TXP community is like no other. Thanks a lot for sharing!

  • Keith Reeder
  • 20 August 2009

Very clever, Patrick!

  • rhynix
  • 6 January 2012

this is great

Add a comment

Use Textile help to style your comments