用户选择 - 获取参考以备将来使用

Question

如何使用 Javascript 获取选区的 [Start, End] 点？

我想将它保存在数据库中以便将来突出显示相同的文本。

该选择是相对于父节点还是整个文档？

Answer 1

不容易得到文字"Of course HTML formatted"，方便以后查找和高亮显示。

从我的角度来看，最好的方法应该是这样的：

从用户输入中获取所选文本的 [Start,End] 点（在 js 中它将只是一个整数）并保存 it.then 您可以突出显示它或通过简单的方式围绕它制作矩形js 或 jquery 插件（将起点和终点发送到您的文本荧光笔功能）。不要忘记所有这些工作将在您的格式 HTML 没有改变的情况下正常工作！

我过去有类似你的项目，所以我这样做了：

$(document).ready(function(){

$(document.body).bind('mouseup', function(e){
        var selection;

        if (window.getSelection) {
          selection = window.getSelection();
        } else if (document.selection) {
          selection = document.selection.createRange();
        }

        selection.toString() !== '' && alertSelection(selection.toString(),e.pageX, e.pageY);
//e.pageX + '/' + e.pageY

    });

function getSelectionCharOffsetsWithin(element) {
    var start = 0, end = 0;
    var sel, range, priorRange;
    if (typeof window.getSelection != "undefined") {
        range = window.getSelection().getRangeAt(0);
        priorRange = range.cloneRange();
        priorRange.selectNodeContents(element);
        priorRange.setEnd(range.startContainer, range.startOffset);
        start = priorRange.toString().length;
        end = start + range.toString().length;
    } else if (typeof document.selection != "undefined" &&
            (sel = document.selection).type != "Control") {
        range = sel.createRange();
        priorRange = document.body.createTextRange();
        priorRange.moveToElementText(element);
        priorRange.setEndPoint("EndToStart", range);
        start = priorRange.text.length;
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end
    };
}


function alertSelection(text,x,y) {
    var mainDiv = document.getElementById("article");
    var sel = getSelectionCharOffsetsWithin(mainDiv);
alert(sel.start + ": " + sel.end + ' ' + text);
}

});

这是一个使用位 jquery 的完整解决方案，希望它能有所帮助:)

Answer 2

首先，您应该尝试使用 PRE 标签，这样您就不必为段落做 BR。

其次，你必须得到选择。为此，我建议使用 Rangy JS 库。有了它，您可以通过以下方式获得范围：

var selection = rangy.getSelection();
var sel_start = selection.anchorOffset;
var sel_end = selection.focusOffset;

然后您可以将格式化程序元素插入文本中的位置。

用户选择 - 获取参考以备将来使用

User selection - Get reference for future use

html

javascript

php

jquery

selection