Nối div để văn bản đã chọn

Question

Tôi muốn hiển thị một số nút nếu ai đó chọn văn bản trong một khu vực có thể chỉnh sửa - như thế này:

Vì vậy, tôi nghĩ rằng tôi phải sử dụng <div contenteditable="true"> thay vì <textarea>

Nhưng thành thật mà nói tôi không có ý tưởng làm thế nào để gắn div

Câu hỏi:

1. Sự kiện (jquery) để chọn văn bản là gì?
2. Làm cách nào để nối thêm div sau khi chọn vào khu vực này?

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

Thanks cho bất kỳ gợi ý!

Answer 1

Kiểm tra này Demo cho việc chọn văn bản,

Event selectstart là bắn trong trường hợp lựa chọn

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

Answer 2

Lựa chọn văn bản:

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

Chọn html:

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

Phụ thêm dữ liệu:

$('appending_element').append(text) 

Answer 3

Nếu bạn muốn thêm các div vào cuối div của bạn, sử dụng .append().

HOẶC

Nếu bạn muốn thêm div của mình sau một số div cụ thể, hãy sử dụng .insertAfter().

Answer 4

Có thể mã này sẽ giúp bạn: -

<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>