js contenteditable - 新しく挿入された要素に書き込むのを防ぎます

Question

私はclass要素でテキストをクラスに置き換える単純な構文ハイライターに取り組んでいます。

言って、私は

<div contenteditable="true"> 
    Some text. | And some other text. 
</div> 

を持っているとカーソルがにあります|パイプ

//ユーザーがタイプfoo

<div contenteditable="true"> 
    Some text. foo| And some other text. 
</div> 

//と私はそれを交換する場合、挿入された要素

<div contenteditable="true"> 
    Some text. <span class="highlight-foo">foo</span>| And some other text. 
</div> 

後に選択するように設定ができますが、入力した場合、あなたはに入力どんなところでも。

//型バー

<div contenteditable="true"> 
    Some text. <span class="highlight-foo">foobar|</span> And some other text. 
</div> 

と私はそれを望んでいないが、私は右の新しく挿入された要素の後に選択を設定することはできません。

<div contenteditable="true"> 
    Some text. <span class="highlight-foo">foo</span>bar| And some other text. 
</div> 

ここで強調して交換を行いJS ..それを解決する方法

... 
// chunk is the variable that holds foo, if we stick the the above example.. 
// select it 
range.setStart(range.startContainer, range.startOffset-chunk.length); 

// add it to the range 
sel.addRange(range); 

// replace it..then set the range to the textNode after the span 
// because after the injection selection.anchorNode is the textNode inside the span.. 
// in chrome, however, this below sets the range correctly. 
range.setStart(sel.anchorNode.parentNode.nextSibling, 0); 

// and it's all good until now, but adding the range to the selection does nothing.. 
sel.removeAllRanges(); 
sel.addRange(range) 

// the selection is still inside the span.. 

ですか？ o私はそれについてたくさん読んだことがありますが、ここでかなりの量の質問がありましたが、この特定の問題に関しては何もありません。

Answer 1

WebKitでこれをテストしていると仮定します。 WebKitのキャレット処理により、テキストノードの先頭にキャレットを配置できなくなります（https://bugs.webkit.org/show_bug.cgi?id=23189）。 Firefoxでは、あなたのコードはうまくいくはずです。

回避策はすべて恐ろしいです。 1つはゼロ幅のスペース（たとえば）を挿入して選択することですが、次に矢印キーを処理する特別なコードを追加し、ゼロ幅のスペースを削除するコードを追加します。あなたができるよう

http://jsfiddle.net/RfMju/

：

更新が

別の回避策は、WebKitのは、それがリンクした後に行くためにキャレットを強制的にリンクするための特別なケースを持っているという事実を使用することですあなたが強調表示された要素の中に入って、それ以外の場合はリンクに変更したいときには、<span>を使うことです。