Basic javascript wysiwyg editor

Question

Can I get an explanation on how to make a wysiwyg editor using a textarea? All I need it to be able to do is parse basic html tags like bold, italics, underline, etc. It doesn't need to have any buttons that inserts it, I just want to have a default text inside the textarea tags that parse the html.

Example:

<textarea cols="20" rows="20" name="ok">
<b>wat</b>
</textarea>

This will print out <b>wat</b> instead of wat inside the textarea.

Edit: jQuery is preferred

Answer 1

A textarea cannot parse HTML -- period. (Anyone can feel free to correct me on this)

The WYSIWYG editors that you see are not in a textarea, at least not in the same way. I suggest using a prebuilt editor such as TinyMCE or FCK Editor.

Answer 2

A textarea will not parse HTML, but by using a WYSIWYG plugin, an editor will replace the textarea and give the user the ability to view and modify the content. With some editors, such as TinyMCE, you are able to set it to Simple mode, and allow only the basics of formatting (bold, italic, underline, bullets, etc) like you are interested in. This helps keeps the editor from being cluttered with unnecessary tools.

I suggest checking out TinyMCE or CKEditor

Answer 3

Look into the contenteditable attribute. It's supported in many modern browsers. Just add it to an element and edit away...

document.getElementById('something').contentEditable = true;

Of course it doesn't work on textareas. You'd need to swap the textarea out with a div and make that editable. You'd also need to make sure the textarea has the contents (e.g. innerHTML) of the div as its value when the form is submitted.