Question

我正在尝试用window.getSelection()方法实现某些目标。我希望在工具提示中获取选定的文本，其中包含一些操作，例如编辑所选文本或删除所选文本，并为该选择添加一些标记和注释，类似于x-editable。在x-editable中，我们无法直接编辑文本。

http://jsfiddle.net/ravimallya/ZXPSY/9/这是我工作的小提琴。我试图通过Annotator得到我想要的东西，但这在IE7或8中不起作用。而且这个很难与asp.net网站集成。

我尝试了Is it possible to show a qtip with a function call?中提到的解决方案，但它无效。另一个类似的问题How to display tooltip next to selected text?没有答案或适当的解决方案。

Bootstrap Popover，或带有自定义内容的qTip2或任何此类其他解决方案或对当前小提琴的修复是非常受欢迎的。

Answer 1

我使用jqueryUI对话框找到了自己的解决方案。所以分享它。它可能对试图实现同样目标的其他人有所帮助。需要包含jquery和jqueryUI库。稍后使用以下代码和脚本。

<div id="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam eros non odio fringilla, placerat feugiat turpis gravida. Vivamus ac porttitor metus. Aliquam a facilisis erat. Morbi a nisi nibh. Vestibulum volutpat gravida eros. Ut in tortor at magna gravida consectetur eget at dui. Vivamus eget justo eu libero mattis interdum. Morbi iaculis lorem ut felis commodo accumsan. Phasellus a tristique tellus, at lobortis neque. Proin quis tempus est. Morbi dignissim tempor justo at fringilla. Proin sit amet tortor mattis, euismod est eu, volutpat mauris.</p>
</div>

脚本

if (!window.mSelect) {
    mSelect = {};
}
mSelect.Selector = {};
mSelect.Selector.getSelected = function () {
    var txt = '';
    if (window.getSelection) {
        txt = window.getSelection();
    } else if (document.getSelection) {
        txt = document.getSelection();
    } else if (document.selection) {
        txt = document.selection.createRange().text;
    }
    return txt;
};

mSelect.Selector.mouseup = function () {
    var st = mSelect.Selector.getSelected();
    if (st != '') {
        $("#dialog-modal").dialog({
            modal: true,
            title: 'You selected ' + st,
            buttons: {
                "Add": function () {

                }
            }
        });
    } 
    else {
        alert("select some text");
    }
};
$(function () {
    $('#text').bind("mouseup", mSelect.Selector.mouseup);
});

在add函数中，我们可以通过ajax发布所选值。

但是，如果有人有一个比这个更好的解决方案（显示工具提示而不是对话框），请告诉我。

文本选择和qtip或此类工具提示

1 个答案: