Question

当我们使用 window. getSection () 代码时, 如何在选择文本后显示一个小图像?

The most similar thing I found was this How can I position an element next to user text selection? but cant seem to get it to work properly :-s Being kinda new to this also doesn t help.

只要需要一些简单的代码来完成它, 图像在哪里出现并不重要, 只要接近选中的文本。

- Edit -- - 爱迪特 -

正如我在评论中所说,我们的想法是显示一个在选定文本附近浮动的按钮(先考虑图像,但最好有一个按钮)(在选择后),并链接引用所选择的内容,如果我们澄清所选择的内容,则该按钮不再显示。

如果在完成文本选择和在要显示的按钮样式中添加 x, y coords 时拉动鼠标coords, 那么这是否可行?

- Edit -- - 爱迪特 -

找到这个 < a href=" http://motyar.blogspot.pt/2010/02/get-user-sective-sective- text- with-jquery-and.html" rel="no follown noreferrer" > http://motyar.blogspot.pt/2010/02/get-user-sective-text-wise-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/

当我们点击 lt; div> 而不选择该按钮继续显示的文本时,问题就在于现在。它只应在选择文本时出现,而我找不到如何修正它...

Answer 1

s 假设 image 是您想要插入的图像元素。想法是将占位符元素置于选中文本之后, 因为我们可以计算文本节点的位置。因此, 我们从此 CSS 开始 :

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

占位符类别属于我们 lt;span> 元素, 以及我们想要插入的图像的 position 属性, 位置绝对有利于保持零维 ;span> 。

现在我们要检查是否做出了选择。不幸的是, 选择时没有提出标准事件。只有文本字段中做出选择, 才会启动 < code> onsect 事件, 即便选择被取消, 也不会启动。

但是,由于选择通常使用鼠标和键盘事件来进行,我们可以倾听它们,检查是否做了选择。

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);
        }
    }
}

Edit :似乎我误解了你的问题。我以为你想在选择之后插入图像 ... 所以,你想知道选择是何时实际作出的吗?

<% 1> 编辑 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 
}

从我对问题的了解来看,这应该能解决你的问题

I have been trying to implement similar functionality , my problem is that the document can be edited as well. The way of saving the annotation is a challenge, currently Im thinking to save the start and end index of the annotion in the db, when document content changes , using mutation observers , I will calculate the new char count of the annotation and then save again in db

请告诉我有没有其他方法来储存和检索DB

友情链接