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.

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.

• javascript
• jquery

• 2 I'm pretty sure that the only way to do this is with "contentEditable"; you can't style text in a <textarea> otherwise. – Pointy Commented May 31, 2011 at 22:20
• 1 Does it have to be inside the textarea? Or could it be regular text in the textarea and bold in a preview pane (like SO's answer preview)? – David Thomas Commented May 31, 2011 at 22:24
• 2 Textarea's won't show html code formatting. <strong>this</strong> will show up as <strong>this</strong>. gosu.pl/steditor is a very small and simply wysiwyg editor that might fit your needs. – Matthew Nessworthy Commented May 31, 2011 at 22:30
• The only way I know if you really need a textarea is a ActiveXControl called DHTMLEDIT, but it requires MSIE and is not included anymore in Windows since Vista. But this control doesn't be simplier, it uses the same mands like mon WYSIWYG-editors(you may say this Control is the beginning of the WYSIWYG-editors known today). – Dr.Molle Commented May 31, 2011 at 22:36
• You didn't ask for a solution that works with major-browsers, you asked for a solution that works with textarea's ;) – Dr.Molle Commented May 31, 2011 at 23:31

1 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/hqvDT/1/