How can I show HTML formatting inside a textarea? [duplicate]

Question

I have code that lets you format the text in a textarea with bold, underline, strikeout or italics. But it displays the html tags instead of actually formatting it. I know once I output it inside a div, it ill be formatted, but I want to show the formatting while the user writes the text.

How can I enable formatting? JavaScript is fine, I'm using JQuery at the moment. I would also rather not use a WYSIWYG editor, if there is another option.

Thanks for any help.

Answer 1

Use contentEditable attribute on div element

 <div contentEditable="true"> 
 </div

This way you can format your input in any desired way, just dont forget properly escape data.

Answer 2

Just a thought; if you just want to let users see what their response will look like, you could take a cue from this site and have a sort of "preview" div right above/below the comment box. You could use onKeyUp to put the code into the div to keep it up do date as the user types. It's not perfect, but it's probably as good as you're going to get if you don't want to use a WYSIWYG.

That being said, the contentEditable + WYSIWYG option is probably more user friendly, and simpler, IMHO.