Search code examples
javascriptjquerywysiwyg

Basic javascript wysiwyg editor

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

Solution

  • 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.

    alt text