Append div to selected text

Question

I want to show some buttons if someone select text in a editable area - like this:

So, I think I have to use <div contenteditable="true"> instead of <textarea>

But to be honest I have no idea how to append the div

Questions:

1. Whats the (jquery) event for selecting text?
2. How to append a div after select to this area?

JsFiddle: http://jsfiddle.net/hA7Zn/

Thanks for any hints!

Answer 1

Check this Demo for getting selected text,

Event selectstart is fired in case of selection

$(function () {
    $('div').on('selectstart', function () {
        console.log('..');
        $(document).one('mouseup', function() {
            alert(this.getSelection());
        });
    });
});