TXP Tips

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
$(function(){
$('#message').one('focus',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");
$('#previewcomment').html($comment);
});
});
});
</script>

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!