Live Preview is pretty easy to add to EE. This is how. The code, unless otherwise noted, goes into whatever template(s) you use to show comments.
The following code goes between the <head> and </head> section of your comment template:
<script type="text/javascript">
<!--
function ReloadTextDiv(){
var NewText = document.getElementById("DynamicText").value;
NewText = NewText.replace(/\n/g, '<br />');
var DivElement =
document.getElementById("TextDisplay");
DivElement.innerHTML = NewText;}
//-->
</script>
Now add this code where you want the live preview to appear (usually above the comment textarea):
<h4 class="title">Live Preview</h4>
<span id="TextDisplay"></span><br />
Now you’ll see a textarea with the name comment, you need to make it look like this:
<textarea name="comment" cols="50" rows="10" id="DynamicText" onkeyup="ReloadTextDiv();">{comment}</textarea>
That should just about do it. I also added some code to my stylesheet to format the text inside the live preview.
#TextDisplay {
font-size: 11px; }
etc. =)