Boldening text "Inside" a textarea

Question

I have a textarea #myarea into which I'm typing text. I've typed this text.

This is a sentence and only this word will end up being bolded

Now I have a button on the side, like a bold button. I want to select the letters I want bolded, click the button, and see those letters turn bold inside the textarea. It's similar to the standard functionality found in many editors, but I'm looking for something much simpler as I described here.

So is there a way to do this with jquery? I'm guessing it's a 2-part problem. I need to find the letters selected, then apply bold to them so it shows bold inside the textarea.

Answer 1

If you don't mind using a div that has its ContentEditable property set to true then you can easily do this using:

document.execCommand('bold',null,false);

You can easily style this div to look and feel like a textarea.

See jsFiddle here: http://jsfiddle.net/hqvDT/1/