Question

Does anyone know how Stackoverflow does the ‘preview box’ which is below the textarea in which questions and answers are fed? Basically I suppose one could use ‘.clone()’ with jQuery, but then it would not render html markup (e.g. <b> or <br /> and so on) as the div wouldn’t be reloaded.

I know that stackoverflow uses ‘ * ‘ to markup bold text etc. but for my project ‘real’ markup will be used, i.e. for bold there is a button that would include <b> around the selected text.

I’m still learning this stuff, but just as a hint I suppose I should be looking at something AJAX-like, but haven’t been able to find anything really like this particular case!

Thanks!

Answer 1

if you need to show the html written inside a textarea just take its value and copy inside a preview element, smthg like

$('#preview-div').html($('textarea').val())

if you need to show it while the user is typing just call this statement inside a keyup event handler of the textarea

$('textarea').on('keyup', function() {
   $('#preview-div').html($(this).val());
});

anyway be aware of input typed by the user: it’s better if you always sanitize the markup before showing on the preview element.

Example fiddle: http://jsfiddle.net/YX9Eq/