JS CONTENTEDITABLE - 防止写入新插入的元素(js contenteditabl

我工作的一个简单的语法高亮，取代与类DOM元素的文字。

我说，我有一个

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

但如果你键入，你键入到span..no不管是什么。

//型棒

<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..

如何解决呢？ OO我已经读了很多关于它甚至显得有关此特殊问题，有相当数量的有关问题在这里，但没有。

我假设你在WebKit的测试此。 WebKit在处理插入符号阻止您将插入符的文本节点的开始： https://bugs.webkit.org/show_bug.cgi?id=23189 。在Firefox中你的代码应该罚款。

变通办法都太可怕了。一种是插入一个零宽度的空间（如\u200B ），并选择它，但你必须添加特殊代码来处理箭头键和代码去除零宽度的空间。

更新

另一个解决办法是使用的WebKit有它强制插入符号链接后去联系一个特殊情况的事实：

http://jsfiddle.net/RfMju/

所以，你可以做什么，这是不愉快的，但可行的，是使用<span>当你想插入符号去突出显示的元素中，它变成一个链接，否则。