在javascript IE8中设置选择范围答案

【问题标题】：Set selection range in javascript IE8在javascript IE8中设置选择范围
【发布时间】：2012-01-21 17:14:16
【问题描述】：

我正在使用 div[contenteditable=true] 开发所见即所得的编辑器我想设置一个从节点A的偏移X到节点B的偏移Y的选择范围。我在Firefox和IE9上做得很好，代码是：

var range = document.createRange();
range.setStart(selectNode, 0);
range.setEnd(selectNode, selectNode.textContent.length);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

但是在 IE8 上，范围对象就完全不同了，它没有 setStart/setEnd，选择对象也没有 remove/addRange 的东西。请帮忙，

【问题讨论】：

标签： javascript range internet-explorer-8 selection selection-api

【解决方案1】：

我遇到了类似的问题，发现这个 polyfill 对我非常有用，因为我无法在我的情况下使用 rangy： http://bl.ocks.org/visnup/3456262

编辑：原始链接确实已经死了。回顾我的旧代码，polyfill 似乎从未进入发布代码，我们只是简单地进行了特征检测，如下所示：

if(window.getSelection || document.selection){

然后在 mouseup 上：

var range;
if(window.getSelection){
    var selection = window.getSelection();
    range = selection.getRangeAt(0);
} else if(document.selection){
    range = document.selection.createRange();
    if(!range.surroundContents){
        // then give up, feature not fully implemented
    }
}
// now do stuff with range (i.e. the selection)

...因此该功能不支持 IE8 用户。

但一切都没有丢失：如果您必须支持 IE8，则有一个 newer (than my original answer) polyfill on Github 可能会起作用。它看起来既精简又全面。

【讨论】：

此解决方案仅压缩 800 字节，并针对每个要求的 IE8。与更重的 Rangely.js 相比，这可能是一个更好的解决方案。
这对我来说也很有魅力，我认为这是最好的方法。
链接已失效。有人可以提供一个新链接吗？
我已经添加到我的原始答案中，因为链接确实已经死了。

【解决方案2】：

看看 rangy。它是一个跨浏览器范围/选择 API。这可能就是您所需要的。

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

【讨论】：

Rangely-core.js 压缩为 42kb，这可能是设计考虑因素。