Whilst leaving a comment over at “Jon Hicks”:http://www.hicksdesign.co.uk/ site, I noticed his excellent live preview for comments. As you type it displays how your comment will look, all in real time. I would love to do something similar for this site, however Jon uses HTML for comments so lets the browser do the parsing – I’ve decided to use textile which means I’d have to do the parsing myself in Javascript, which doesn’t sound too easy…
-
Follow
Following
Already have a WordPress.com account? Log in now.
magpiebrain 
13 Responses to “Live comment preview using Javascript”
Well, Javascript supports regexes, so you could probably provide basic formatting like links fairly easily.
Yeah, I had thought of that. I might look at it this weekend.
oooh, http://www.kryogenix.org/include/rc_textile.js
You sir, are a person of godlike qualities! At least when it comes to coming up with useful links.
Damned by faint praise – my gift, my curse. 🙂
Anyway, got a live preview working locally using Stuart’s code, so I’ll look at implementing it here soon…
Oh. Wow.
“Awesome”:http://www.google.com
i want to enaple print preview in the javascript.
like.. windows.print()
I’m not sure what you’re after – you mean you want a Javascript method of invoking a print preview? For what purpose?
Hi
If i click print button(user defined)than i want to open print preview
How to do that?
prviouslt i used this way…
<script javascript; function:printme(winows.print()}…
Private clicj_Print(){
Browsername.Navigate(Javascript:prinme,…)
}
This code im’tly print the data(what ever in the browser)
I want click the event than first open print preview…
how do to that?
I don’t know myself, and think the exact behaviour might vary greatly between browsers, but “this article”:http://www.intranetjournal.com/text/corner/hoque/config-1.shtml might be a good starting point – or else try your friend “google”:http://www.google.com/search?q=javascript show print preview&sourceid=firefox&start=0&start=0&ie=utf-8&oe=utf-8
here’s one that does it in IE only,
function printpr()
{
var OLECMDID = 7;
/* OLECMDID values:
* 6 – print
* 7 – print preview
* 1 – open window
* 4 – Save As
*/
var PROMPT = 1; // 2 DONTPROMPTUSER
var WebBrowser = ”;
document.body.insertAdjacentHTML(‘beforeEnd’, WebBrowser);
WebBrowser1.ExecWB(OLECMDID, PROMPT);
WebBrowser1.outerHTML = “”;
}
P.S. if you know how to do this in other browsers like mozilla, please email me !!!
Cheers!
DASH
I did indeed getting working for firefox et al, doing this:
function reloadPreviewDiv() {
var commentString = document.getElementById(‘comment’).value;
document.getElementById(‘commentpreview’).innerHTML = textile(commentString);
}
The call to textile simply applies textile formatting conventions – if you want to allow HTML comments, just set the innerHTML to commentString – if you want to strip HTML from the previews you’ll have to dig out some Javascript to do the stripping for you.