4

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

我发现的最相似的是这个如何在用户文本选择旁边放置一个元素？但似乎无法让它正常工作：-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>不选择按钮一直显示的文本。它应该只在选择文本时出现，我找不到如何修复它......

4

2 回答 2

2

假设这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：或多或少地更改了所有内容以匹配请求。

于 2012-05-27T11:34:59.793 回答
0

例如：

$("div.rte").on("mouseup",function(){ // event binding on the div 
if(window.getSelection().toString().length>0) //check length if >0 then only proceed
{
 // do processing 
}

根据我对问题的理解，这应该可以解决您的问题

我一直在尝试实现类似的功能，我的问题是文档也可以编辑。保存注解的方式是一个挑战，目前我想把注解的开始和结束索引保存在数据库中，当文档内容发生变化时，使用变异观察者，我会计算注解的新字符数，然后再次保存在数据库中

请让我知道是否还有其他方法可以从数据库中存储和检索

于 2019-06-20T06:27:00.577 回答