Offset text within the text field

Question

I have textarea #myarea into which I am typing text. I typed this text.

This sentence and only this word are ultimately bold.

Now I have a button on the side, like a fat button. I want to select the letters that I want to highlight in bold, press the button and see that these letters are shown in bold inside the text box. It looks like 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 assume this is a two-part problem. I need to find the selected letters and then apply bold to them so that it appears in bold inside the text box.

Answer 1

If you don't mind using a div whose ContentEditable property is set to true, you can easily do this using:

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

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

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