5

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.

Thomas McFarlane
  • 51
  • 1
  • 1
  • 2

4 Answers4

14

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.

Aurimas Ličkus
  • 9,886
  • 4
  • 24
  • 26
  • This is only for browsers that support HTML5, it's plausible but wouldn't solve cross-browser reliability. – MacMac Oct 16 '11 at 19:14
  • 3
    @lolwut: `contentEditable` has been supported in all major (desktop) browsers for [quite some time](http://caniuse.com/contenteditable). – You Oct 16 '11 at 19:22
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.

WCMiller
  • 31
  • 2
0

I believe it's only possible by using some div or other styleable html element instead of your textarea. With Javascript you would then add the functionality of the textarea.

How about you use some formatting system like this here on SO? It is much more elegant in my opinion, than pseudo WYSIWYG.

janoliver
  • 7,744
  • 14
  • 60
  • 103
-1

Replace the textarea with an div and enable the designmode. Or you can use the jquery plugin http://plugins.jquery.com/project/designMode

Marknl
  • 182
  • 1
  • 9