将div附加到选定的文本

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

Selecting the text:

var text = $('text_element').text();

Selecting the html:

var html = $('text_element').html()

Appending data:

$('appending_element').append(text)

Answer 2

If you want to append the div in the end of your div, use .append() .

OR

If you want to add your div after some particular div, use .insertAfter() .

Answer 3

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());
        });
    });
});

Answer 4

May be this code will help you:-

<textarea cols="45" rows="5" id="message">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</textarea>
<script>

$("textarea").click(function(){
    var txt=document.getElementById("message");
    alert(txt.value.substr(txt.selectionStart, (txt.selectionEnd -txt.selectionStart)));
});
</script>