如何使用IE (7-8)在html编辑器中设置光标

Question

实际上，我正在尝试，将光标设置为html编辑器中的特定节点(该编辑器使用一个内容可编辑的iframe)。例如，我有几个段落，希望光标移动到上一段的开头。不幸的是，Internet对象不支持setStartBefore和setStartAfter。艾兰奇工程不是一个选项-我正在寻找的解决方案需要与IE的开箱即用。

如何在IE中设置光标？

在Firefox中，解决方案是直接的：

// sets the cursor position (start defines, if cursor is needed at the start or end of the node)
function setCursor(editor, node, start){

var tn = editor.getDoc().createTextNode("."); // gets the editors document
  if (start){
    node.insertBefore(tn, node.firstChild);
  } 
  else node.appendChild(tn);

  rng = editor.selection.getRng();  // gets the browsers range object for the users selection
  rng.selectNode(tn);
  rng.setStartBefore(tn);
  rng.setStartAfter(tn);

  ed.selection.setRng(rng);
  node.removeChild(tn);  // removes the caret node - curser is placed now
}

Answer 1

为此，您可以使用我的兰迪项目。然后，所有浏览器中的代码都是相同的：

function setCursor(element, start) {
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;

    rangy.init();
    var range = rangy.createRange(doc);
    range.selectNodeContents(element);
    range.collapse(start);
    rangy.getSelection(win).setSingleRange(range);
}

或者，如果没有库，这种特殊情况就不会太棘手：

function setCursor(element, start) {
    var doc = element.ownerDocument || element.document;
    if (typeof doc.createRange != "undefined") {
        var range = doc.createRange();
        range.selectNodeContents(element);
        range.collapse(start);
        var win = doc.defaultView || doc.parentWindow;
        var sel = win.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof doc.body.createTextRange != "undefined") {
        var textRange = doc.body.createTextRange();
        if (start) {
            textRange.moveToElementText(element);
            textRange.collapse(start);
        } else {
            var markerEl = doc.createElement("span");
            markerEl.innerHTML = "\u00A0";
            element.appendChild(markerEl);
            textRange.moveToElementText(markerEl);
            element.removeChild(markerEl);
        }
        textRange.select();
    }
}

Answer 2

使用光标位置 (此解决方案适用于IE、Firefox和Opera)