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

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

• javascript
• jquery
• wysiwyg

• Have you looked at tinymce or any of the hundred other javascript rich editors? Do you have some objection to using them? – Jarrett Widman Commented Sep 5, 2010 at 1:35
• I don't think it is so simple to make even a basic wysiwyg editor. The issue is that text display with style looks is an output function in HTML. But you also need the input side to create an editor. I suggest you investigate a well written, flexible one such as the YUI RTE. Then configure-out the features you don't want. – Larry K Commented Sep 5, 2010 at 1:42
• I would think it would take some pretty heavy regular expressions to create even a simple editor of your own. – Shane Reustle Commented Sep 5, 2010 at 1:48

3 Answers 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.

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.

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