Rangy теряет позицию каретки на backspace в contenteditable div

Question

Я исследовал все Rangy Q & Что касается дней, но ничего не мог приспособить к этому случаю.

У меня есть следующий contenteditable

<div id="area" style="width:100%;height:2em;" 
contentEditable="true"; 
onkeyup="formatText();" 
></div> 

вызова функции, которая каждый раз, когда пользователь вводит что-то, он анализирует содержание и форматы конкретных лексем.

function formatText() { 

    var el = document.getElementById('area'); 
    var savedSel = saveSelection(el); // calls Rangy function 

    var tokenColor; 

     // removes html tags before passing the expression to the parser 
    var userInput = document.getElementById('area').innerHTML.replace(/(<([^>]+)>)/g,"").replace(/&amp;/g, "").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/<span[^>]*>+<\/span>/, ""); 


    var i, newHTML=[]; 

    tokenType=[]; // [NUMBER,+,(,NUMBER,..] 
    tokenArray=[]; // [3,+,(5,...] 

    var resultOutput = parse(userInput); // parser also fills tokenType and tokenArray 

    for (i=0; i<tokenArray.length-1; i++){ 

     newHTML += "<span style='color: " + tokenColor + " '>" + tokenArray[i] + "</span>"; 

     } // newHTML looks like <span style='color: red'>3</span><span style='color: black'>+</span> etc. 


    el.innerHTML = newHTML; // replaces content of <div> with formatted text  

    restoreSelection(el, savedSel); // calls Rangy function to restore cursor position 
} 

Я использую следующие функции, основанные стройный, представленные автором в других сообщений на этом форуме:

function saveSelection(containerEl) { 
    var charIndex = 0, start = 0, end = 0, foundStart = false, stop = {}; 
    var sel = rangy.getSelection(), range; 

    function traverseTextNodes(node, range) { 
     if (node.nodeType == 3) { 
      if (!foundStart && node == range.startContainer) { 
       start = charIndex + range.startOffset; 
       foundStart = true; 
      } 

      if (foundStart && node == range.endContainer) { 
       end = charIndex + range.endOffset; 
       throw stop; 
      } 
      charIndex += node.length; 


     } else { 
      for (var i = 0, len = node.childNodes.length; i < len; ++i) { 
       traverseTextNodes(node.childNodes[i], range); 
      } 
     } 
    } 

    if (sel.rangeCount) { 
     try { 
      traverseTextNodes(containerEl, sel.getRangeAt(0)); 
     } catch (ex) { 
      if (ex != stop) { 
       throw ex; 
      } 
     } 
    } 

    return { 
     start: start, 
     end: end 
    }; 
} 



function restoreSelection(containerEl, savedSel) { 
    var charIndex = 0, range = rangy.createRange(), foundStart = false, stop = {}; 
    range.collapseToPoint(containerEl, 0); 

    function traverseTextNodes(node) { 
     if (node.nodeType == 3) { 
      var nextCharIndex = charIndex + node.length; 
      if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) { 
       range.setStart(node, savedSel.start - charIndex); 
       foundStart = true; 
      } 
      if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) { 
       range.setEnd(node, savedSel.end - charIndex); 
       throw stop; 
      } 
      charIndex = nextCharIndex; 
     } 

     else { 
      for (var i = 0, len = node.childNodes.length; i < len; ++i) { 
       traverseTextNodes(node.childNodes[i]); 
      } 
     } 
    } 

    try { 
     traverseTextNodes(containerEl); 
    } catch (ex) { 
     if (ex == stop) { 
      rangy.getSelection().setSingleRange(range); 
     } else { 
      throw ex; 
     } 
    } 
} 

Все работает отлично, пока я пытаюсь, чтобы удалить символ. В этот момент курсор перескакивает в начале div.

Любая идея, почему это может произойти?

Большое спасибо.

Answer 1

Мне кажется, что это может сработать. Решение может быть таким же простым, как вызов метода focus() контента, приемлемого для контента <div>, до восстановления выбора.

Answer 2

Я решил проблему с помощью Тима Дауна (спасибо Тиму!).

Недавно он добавил новый модуль TextRange в Rangy, и он отлично работает. Модуль имеет выбор сохранения/восстановления на основе индекса символа внутри видимого текста на странице и поэтому невосприимчив к изменениям innerHTML. Вы можете найти демо здесь:

http://rangy.googlecode.com/svn/trunk/demos/textrange.html

Документация (предварительная): http://code.google.com/p/rangy/wiki/TextRangeModule

Так в основном код должен быть:

document.getElementById("area").onkeyup = function() { 
    var sel = rangy.getSelection(); 
    var savedSel = sel.saveCharacterRanges(this);  

    var userInput = this.textContent || this.innerText; 

    var userInputLength = userInput.length; 
    var newHTML = []; 

    for (var i=0; i<userInputLength; i++) { 
     newHTML[i] = "<span style='color: red'>" + userInput.charAt(i) + "</span>"; 
    } 

    this.innerHTML = newHTML.join(""); 

    sel.restoreCharacterRanges(this, savedSel); 
}; 
​ 

Надеется, что это помогает.