使用javascript / jquery在文本区域内用强标签包装突出显示的文本

Question

I am looking to create a javascript/jquery function to wrap a piece of highlighted text from a textarea in strong tags - similar to the WYSIWYG editor here.

Is this possible and if so can you point me in the right direction.

EDIT:

OK so here's a hopefully clearer description of what I want...

I have a textbox on my page which I can type in.

I then want to be able to highlight a part of this text and wrap the highlighted part in <strong> tags

So if the text box had the words one two three and I highlighted the word "two", I want to be able to wrap that word in the strong tags - so becoming one <strong>two</strong> three

Hope this is clearer... I know there are plugins out there but I don't need the full WYSIWYG functionality.

Answer 1

My Rangy inputs (terrible name, I know) jQuery plug-in does this.

Example code:

$("#foo").surroundSelectedText("<strong>", "</strong>");

jsFiddle: http://jsfiddle.net/aGJDa/

Answer 2

I love Rangy! Use it often! But I didn't want to include the whole thing just for this little application, so I did it using document.execCommand to wrap the selected text, then used the href (third parameter of the CreateLink execCommand) to find the element, wrap it with what I wanted, and then remove the link:

    document.execCommand('CreateLink', false, 'uniqueid');
    var sel = $('a[href="uniqueid"]');
    sel.wrap('<strong />')
    sel.contents().unwrap();

document.execCommand is supported by all major browsers so you should be safe hacking it this way. In the browsers I've tested, the browser itself will close and open tags for you, so if you're selecting from the middle of one html tag to the middle of another, it should nest the tags correctly.