javascript - 选择要引用的文本后显示按钮

Question

当我们使用window.getSelection()代码时，如何在选择一些文本后显示一个小图像？

我发现最相似的是这个 How can I position an element next to user text selection?但似乎无法让它正常工作 :-s对此有点陌生也无济于事。

只需要一些简单的代码就可以做到，图片显示的位置并不重要，只要它靠近所选文本

-编辑-

正如我在评论中所说，这个想法是显示一个按钮(首先想到图像，但按钮更好)漂浮在所选文本附近(做出选择后)，带有引用所选内容的链接，如果我们清除了选择的内容按钮不再显示。

这是否可以通过在完成文本选择时拉动鼠标坐标并将 x、y 坐标添加到要显示的按钮的样式来实现？

-编辑-

让它按照我想要的方式工作，考虑到坐标的想法。找到这个http://motyar.blogspot.pt/2010/02/get-user-selected-text-with-jquery-and.html有了它，我想出了这个:

function getSelected() {
if (window.getSelection) {
    return window.getSelection();
}
else if (document.getSelection) {
    return document.getSelection();
}
else {
    var selection = document.selection && document.selection.createRange();
    if (selection.text) {
        return selection.text;
    }
    return false;
}
return false;
}

$(document).ready(function() {
var blank = '',
    selectionImage;
$('#mensagem').mouseup(function(e) {
    var selection = getSelected();

    if (!selectionImage) {
        selectionImage = $('<button>').attr({
            type: 'button',
            title: 'Citar Texto seleccionado',
            id: 'quote-place'

        }).html("Citar").css({
            "color": "red"
        }).hide();

        $(document.body).append(selectionImage);

    }
    $("#quote-place").click(function quote() {
        var txt = '';
        if (window.getSelection) {
            txt = window.getSelection();
        }
        else if (document.getSelection) {
            txt = document.getSelection();
        }
        else if (document.selection) {
            txt = document.selection.createRange().text;
        }
        else {
            return;
        }
        document.aform.selectedtext.value = txt;

    }).mousedown(function() {

        if (selectionImage) {
            selectionImage.fadeOut();
        }
    });

    selectionImage.css({
        top: e.pageY - 30,
        //offsets
        left: e.pageX - 13 //offsets
    }).fadeIn();
});
});​

http://jsfiddle.net/ordhor/2Gc8c/

现在的问题出在我们点击 <div> 时。在不选择文本的情况下，按钮会一直显示。它应该只在选择文本时出现，我找不到修复方法...

Answer 1

让我们假设 image是您要插入的图像元素。这个想法是放置一个占位符 <span>所选文本之后的元素，因为我们无法计算文本节点的位置。所以，我们从这个 CSS 开始:

.place-holder {position: relative;}
.quote-image {
    position: absolute;
    top: 0;
    left: 0;
}

占位符类用于我们的 <span>元素，以及 position我们要放入的图像的属性，绝对定位以保持零宽度 <span> .

现在我们要检查是否进行了选择。不幸的是，做出选择时不会引发标准事件。 onselect只有在文本字段中进行选择时才会触发事件，即使取消选择也不会触发。

但由于选择通常是使用鼠标和键盘事件进行的，我们可以监听它们并检查是否进行了选择。

var prevRng;
function checkSelection() {
    var s = getSelection(), r = s.rangeCount && s.getRangeAt(0);
    if (prevRng) {
        if (!r || r.endContainer !== prevRng.endContainer
                || r.endOffset !== prevRng.endOffset) {
            // The selection has changed or been cleared
            selectionClear();
        }
    }
    if (r) setPlaceHolder(r);
}
document.addEventListener("mouseup", checkSelection);
// mousedown usually clears the selection
document.addEventListener("mousedown", checkSelection);
// You can use the keyboard to extend the selection, or select all (Ctrl+A)
document.addEventListener("keyup", checkSelection);

prevRng是函数范围内的一个变量，用于存储所做的选择。现在我们可以编写工作代码了:

function setPlaceHolder(range) {
    if (range.startContainer === range.endContainer
            && range.startOffset === range.endOffset) {
        // The selection is clear
        prevRng = null;
        return;
    }
    prevRng = range;
    var endc = range.endContainer, span = document.createElement("span");
    span.className = "place-holder";
    span.appendChild(image);
    if (endc.nodeType === Node.TEXT_NODE) { // Node.TEXT_NODE === 3
        var p1 = endc.nodeValue.substring(0, range.endOffset),
            p2 = endc.nodeValue.substring(range.endOffset);
        endc.nodeValue = p1;
        if (p2)
            endc.parentNode.insertBefore(document.createTextNode(p2),
                    endc.nextSibling);
    }
    endc.parentNode.insertBefore(image, endc.nextSibling);
}

function selectionClear() {
    if (!prevRng) return;
    var endc = prevRng.endContainer;
    if (endc.nextSibling.className === "place-holder") {
        endc.parentNode.removeChild(endc.nextSibling);
        if (endc.nodeType === Node.TEXT_NODE
                && endc.nextSibling.nodeType === Node.TEXT_NODE) {
            // Joining previously divided text nodes
            endc.nodeValue += endc.nextSibling.nodeValue;
            endc.parentNode.removeChild(endc.nextSibling);
        }
    }
}

编辑:看来我误解了你的问题。我以为您想在选择之后插入图像...所以，您想知道实际选择的时间是什么时候？

编辑 2:或多或少地更改了所有内容以符合要求。