Question

大家。
我有一点问题;我正在努力建立一个所见即所得，但我遇到了一些问题我有一个id = desc2的contenteditable div和一些按钮。例如，我们可以使用“粗体”按钮。

<div class="magic" magic_id="desc2">
    <div class="magicbutton one" magic="[b]%s[/b]">
        <span style="font-weight:bold;">Bold</span>
    </div>
</div>

我有一些jQuery ++选择应用程序：

$('#desc2').on('mouseup', function() {
    var selection = $(this).selection(),
        text = $(this).text().substring(selection.start, selection.end);
    console.log(text);
});

我已经删除了脚本的其他部分，因为如果我设法让它工作，我就完成了：D
所以，正如我所说的，如果我这样做，一切都很好：我在div上部分并在控制台上输出内容。但这不是我想要做的。我写了这个：

$('.magicbutton.uno').on('click', function(){
    var id = $(this).parent().attr("magic_id");
    var selection = $("#"+id).selection(),
    text = $("#"+id).text().substring(selection.start, selection.end);
    console.log(text);
});

每次点击时，都需要更改div的ID，并输出所选文本，但不会。代码是相同的，我检查了第一个脚本中的$(this)与第二个脚本中的$("#"+id)相同。

我该怎么办？谢谢！

编辑：jsFiddle

Answer 1

当DIV失去焦点时，选择无效。作为解决方法，您可以使用数据对象：

DEMO

$('.magicbutton.one').on('click', function(){
    var id = $(this).parent().attr("magic_id"); //id = desc2, i used this because i could have multiple forms in a page
    var selection = $("#"+id).data('selection');
    alert(selection);
}); //This doesn't work

$('#desc2').on('mouseup', function() {
    var selection = $(this).selection(),
        text = $(this).text().substring(selection.start, selection.end);
    $(this).data('selection', text);
});

jQuery ++，.selection（）上的问题

1 个答案:

DEMO