将div附加到选定的文本

Question

如果有人在可编辑区域中选择文字，我想显示一些按钮 - 如下所示：

所以，我认为我必须使用<div contenteditable="true">而不是<textarea>

但说实话，我不知道如何追加div

问题：

1. 选择文字的（jquery）事件是什么？
2. 如何在选择此区域后附加div？

的jsfiddle： http://jsfiddle.net/hA7Zn/

感谢任何提示！

Answer 1

选择文字：

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

选择html：

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

追加数据：

$('appending_element').append(text)

Answer 2

如果您想将div添加到div的末尾，请使用.append()。

OR

如果您想在某个特定div之后添加div，请使用.insertAfter()。

Answer 3

选中 Demo 以获取所选文字

在选择

的情况下会触发 selectstart 事件

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

Answer 4

可能这段代码会帮助你： -

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