跨浏览器选择范围库？ [英] Cross Browser Selection Range Library?

问题描述

有没有人知道用javascript编写的跨浏览器用户选择范围库？

Does any one know of any cross browser user selection range libraries written in javascript?

我发现了一些jQuery插件（坦白说，非常bug）。
我已经实现，并使用以下来取消我的一些技巧：

I have found a few jQuery plugins, (which quite frankly are too limiting and very buggy). I have already implemented and am using the following to pull off some of my tricks:

http://plugins.jquery.com/project/wrapSelection
http://perplexed.co.uk/1020_text_selector_jquery_plugin.htm

还有其他一些小脚本等。

And a few other small scripts and such.

我想知道你在那里找到了什么。不要再发送给我谷歌这个了，（我花了几天工作所有这一切）。希望这可以是未来的程序员可以找到答案。

I would just like to know what you have found out there. Don't send me googling this again, (I've spent days working on all this). Hopefully this can be where future programmers can find the answer.

推荐答案

我开发了一个跨浏览器范围和选择库 Rangy 。它的核心在IERange的概念上并不相同，但在DOM级别2范围和HTML5选择规范的实现方面，以及在浏览器错误的稳定性和解决方法方面。

I've developed a cross-browser Range and selection library called Rangy. Its core is not dissimilar in concept to IERange but goes beyond it in terms of implementation of the DOM level 2 Range and HTML5 selection specifications, and also in terms of stability and workarounds for browser bugs. I think it's the best there is out there.

还有用于保存，恢复和序列化选择以及将CSS类应用于范围和选择的额外模块。

There are also extra modules for saving, restoring and serializing selections and applying CSS class to ranges and selections.

http://code.google.com/p/rangy

以下使用Rangy的一些Rangy扩展来轻松迭代选择内的文本节点，并围绕每个节点：

The following uses some Rangy extensions to Ranges to easily iterate over text nodes within a selection and surround each one:

function surroundSelectedText(templateElement){
    var range, sel = rangy.getSelection();
    var ranges = sel.getAllRanges();
    var textNodes, textNode, el, i, len, j, jLen;
    for (i = 0, len = ranges.length; i < len; ++i) {
        range = ranges[i];
        // If one or both of the range boundaries falls in the middle
        // of a text node, the following line splits the text node at the
        // boundary
        range.splitBoundaries();

        // The first parameter below is an array of valid nodeTypes
        // (in this case, text nodes only)
        textNodes = range.getNodes([3]);

        for (j = 0, jLen = textNodes.length; j < jLen; ++j) {
            textNode = textNodes[j];
            el = templateElement.cloneNode(false);
            textNode.parentNode.insertBefore(el, textNode);
            el.appendChild(textNode);
        }
    }
}

var span = document.createElement("span");
span.style.color = "green";
span.style.fontWeight = "bold";

surroundSelectedText(span);

这篇关于跨浏览器选择范围库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！