Question

实际上我正在尝试将光标设置为html编辑器中的特定节点（使用可信的iframe）。例如，我有几个段落，并希望光标移动到上一段的开头。不幸的是，Internet Explorers范围对象不支持setStartBefore和setStartAfter。 The ierange project不是一个选项 - 我正在寻找的解决方案需要开箱即用。

如何在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

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

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

Working with the Cursor Position （此解决方案适用于IE，Firefox和Opera）

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

2 个答案: