Question

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

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

只需要一些简单的代码来完成它，图像显示的位置并不重要，只要它靠近所选文本

-edit -

正如我在评论中所说的那样，我们的想法是在所选文本附近显示一个按钮（首先考虑图像但是按钮更好），在所选文本之后（选择完成后），以及引用所选内容的链接，以及是否我们清除按钮不再显示的内容。

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

-edit -

让它像我想要的那样工作，记住了那些coords的想法。找到了这个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属性，该属性绝对定位以保持零宽度{{1 }}

现在我们要检查是否进行了选择。不幸的是，在做出选择时没有提出标准事件。仅当在文本字段中进行选择时才会触发<span>事件，即使取消选择也不会触发。{/ p>

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

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

编辑：我似乎误解了你的问题。我以为你想在选择后插入图像 ...那么，你想知道实际选择的时间是什么时候？

编辑2 ：更改了或多或少的所有内容以匹配请求。

Answer 2

例如：

$("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 
}

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

我一直在尝试实现类似的功能，但我的问题是文档也可以编辑。保存注释的方式是一个挑战，目前我正在考虑将注释的开始索引和结束索引保存在db中，当文档内容更改时，使用突变观察者，我将计算注释的新字符数，然后再次保存在数据库中

请告知我还有其他方法可以从db存储和检索

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

2 个答案: