带有嵌套的不可编辑标签的Newlines和contenteditable

Question

对于HTML中的contenteditable元素，我有一个奇怪的例子。我们有一个丰富的文本编辑器，客户加载预先制作的模板(由我们)，然后可以修改模板，他们想要的任何方式(主要)。

我们的部分模板已经被标记为不能直接编辑，但仍然可以删除，等等。然而，当一个这样的元素是一行上的第一个元素(紧跟在<br/>标记之后)，并且用户在上面的行上点击DEL时，似乎存在一个问题。因为它的contenteditable=false，浏览器似乎删除的不是<br/>，而是整个不可编辑的范围。

示例HTML如下所示

<div contenteditable=true>
    <span>blah blah blah</span><br/>
    <span contenteditable="false">You cant edit this value directly</span>
</div>

如果用户将光标放在blah blah blah之后，并点击DEL，则会删除下一个可编辑的整个内容，而不是换行符。

有没有什么办法，javascript或其他方式，来修复这种行为？

我尝试过检测光标位置(使用rangy)和插入临时空格，等等，但我似乎不能让它具有所需的行为，这只是不可编辑的标签被带到前一行。

我们已经将编辑器的使用限制为Chrome，因此无需担心IE或FF。

jsfiddle of an example

Answer 1

将每个跨度设为contenteditable，那么用户将无法删除您不想编辑的跨度，并摆脱可编辑的div。

这是我的JSFiddle版本：http://jsfiddle.net/howderek/HgRsF/2/

Answer 2

这个问题是在2012年提出的，从那时起，这个问题就被解决了，嵌套的contenteditable标签就可以正常工作了。仍然有一些像this bug这样的问题，但总的来说，这个功能应该是可用的。