新行,并且对嵌套的不可编辑标记感到满意

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.

Answer 1

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