Как установить курсор в редакторе HTML, используя IE (7-8)

Question

На самом деле я пытаюсь установить курсор на конкретный узел внутри HTML-редактора (который использует contateditable iframe). Например, у меня есть несколько абзацев, и я хочу, чтобы курсор переместился в начало предыдущего абзаца. К сожалению, объект диапазона Internet Explorer не поддерживает setStartBefore и setStartAfter. Проект ierange не является вариантом - решение, которое я ищу, должно работать с 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

Вы можете использовать мой 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

Работа с положением курсора (Это решение работает для меня в IE, Firefox и Opera)