Paint the Tiger, Carve the Swan

I’ve implemented Comment Previewing from Blogsome blogs. There is no way to install 3rd party plugins in WordPress MultiUser, so everything has to be done in JavaScript.

But really, the plugin is just JavaScript packaged up nice anyway.

You need four code fragments, all in your comments.html file. The first one I suggest goes after the line:

{if 'open' == $post->comment_status}

Because it is a JavaScript that uses { and }, you need to remember the {literal} tags.

{literal}<script type="text/javascript">
<!--
function ReloadTextDiv()
{
var UseInstantPreview = document.getElementById("use_instant_preview").checked;
if( UseInstantPreview == true )
{
var NewText = document.getElementById("comment").value;
splitText = NewText.split(/\n/).join("<br />");
var DivElement = document.getElementById("commentpreview");
DivElement.innerHTML = splitText;
}
}
// -->
</script>{/literal}

It probably doesn’t matter exactly where it goes, but having it after the {if} clause means it will only be included in the file if comments are open.

The second code fragment is:

onkeyup="ReloadTextDiv();"

And it goes in the <textarea id=comment … > tag. In context, mine is:

<textarea name="comment" id="comment" cols="60" rows="12" tabindex="4" onkeyup="ReloadTextDiv();"></textarea>

The third fragment is the checkbox for enabling or disabling Comment Preview. It can go wherever looks good.

<input onclick='ReloadTextDiv();' name="use_instant_preview" type="checkbox" id="use_instant_preview" value="1" checked /> <label for='use_instant_preview'>Use Instant Preview</label>

The final fragment tells the browser where the Comment Preview goes:

<div><p id="commentpreview"></p></div>

And it goes where you want the Comment Preview to actually go. I suggest just after the Submit button, or other instructions.

Righto, all of that in there, and it should work. You may need to add an entry to your Site Style Sheet to make the Comment Preview box look the same as your actual comments box.

•

If you wanted to, you can also have a Preview button that will preview what is in the text area then, rather than having Live Preview. This is good for a couple of reasons: I find that long comments slow down when trying to update every keypress.

The big problem is that you cannot have a normal input field inside the form set to do this, it will just try to submit it (or at least, mine did!). So, I’ve replaced my input tags in my form with the following (You may need to insert name='commentform' into the form start tag.):

<a class='button' href='javascript:document.commentform.submit();'> Post Reply </a>
<a class='button' href='javascript:ForceReloadTextDiv();'> Preview </a>

You’ll also need to add the following in just after the ReloadTextDiv function definition:

function ForceReloadTextDiv()
{
var NewText = document.getElementById("comment").value;
splitText = NewText.split(/\n/).join("
“);
var DivElement = document.getElementById(”commentpreview”);
DivElement.innerHTML = splitText;
}

 

« Older : Quicktags for Comments

Blogsome Gravatars : Newer »