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

Question

我对contenteditableHTML 中的元素有一个奇怪的情况。我们有一个富文本编辑器，客户可以将预制模板（由我们）加载到其中，然后可以根据需要（大部分）修改该模板。

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

这个问题是从 2012 年开始的，从那时起，这个问题就得到了修复，嵌套contenteditable标签按预期工作。像这个错误仍然存在一些问题，但总的来说该功能应该是可用的。

2 回答 2