0

大家。
我有一个小问题；我正在尝试构建所见即所得，但遇到了一些问题。
我有一个 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

4

1 回答 1

0

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

演示

$('.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);
});
于 2014-05-04T13:11:43.843 回答