Rangy는 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

작동하는 것처럼 보입니다. 선택을 복원하기 전에 메서드를 사용하여 내용 편집 가능 <div> 메서드를 호출하는 것처럼 간단 할 수 있습니다.

Answer 2

Tim Down의 도움으로 문제를 해결했습니다 (Tim!).

그는 최근에 Rangy에 새로운 TextRange 모듈을 추가했으며 완벽하게 작동합니다. 이 모듈은 페이지의 보이는 텍스트 내의 문자 인덱스를 기반으로 선택 저장/복원을 가지므로 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); 
}; 
​ 

희망을.