html - 带有嵌套不可编辑标签的换行符和 contenteditable

Question

我有一个关于 contenteditable 的奇怪案例HTML 中的元素。我们有一个富文本编辑器，客户可以将(由我们)预制的模板加载到其中，然后可以(主要是)根据需要修改该模板。

我们的部分模板已被标记为不可直接编辑，但仍然可以删除等。但是，当一个这样的元素是一行中的第一个元素(紧接在 <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

让每个 span contenteditable，然后用户将无法删除您不想编辑的 span，并摆脱可编辑的 div。

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