スパンノードを挿入して書き込みを続ける

Question

ノードを編集可能なdivに追加する際に問題があります。

強調表示されたテキストをスパンに追加した後、カーソルが追加されたスパンの外にある必要があります。

現在、カーソルは追加されたスパンの内側にあります。

私はそれを実証するためのフィドルを作成しました： http://jsfiddle.net/4N4ZD/633/

ここではいくつかのコードです：

function insertNodeAtCaret() { 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      var range = sel.getRangeAt(0); 
      range.collapse(false); 
      var span = document.createElement('span'); 
      span.innerHTML = 'TEXT'; 
      span.style.background = 'yellow'; 
      range.insertNode(span); 

      range = range.cloneRange(); 
      range.selectNodeContents(span); 
      range.collapse(false); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
    } 
} 

Answer 1

は解決策を見つけました。ここではフィドルです：http://jsfiddle.net/4N4ZD/638/

トリックは、新しいテキストスパンを追加し、Methodeのを使用することです「setStartAfter」そうのように：

if (sel.getRangeAt && sel.rangeCount) { 
     range = sel.getRangeAt(0); 
     range.deleteContents(); 

     var span = document.createElement('span'); 
     span.innerHTML = 'TEXT'; 
     span.style.background = 'yellow'; 
     range.insertNode(span); 

     var textNode = document.createTextNode('\u00A0'); 
     range.setStartAfter(span); 
     range.insertNode(textNode); 
     range.setStartAfter(textNode); 
     range.collapse(true); 

     sel = window.getSelection(); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    }