Question

我正在使用基于contenteditable的富文本编辑器，并添加了“内联注释”的概念。

我希望评论可以内嵌编辑，也可以通过点击切换进行折叠。

标记类似于

<div id="editor" contenteditable='true'>
    <p>Paragraph 1</p>
    <p>Paragraph 2 <q class="inline-comment" tabindex="1"><span class="comment" tabindex="2">This is a comment</span><span class="inline-comment-control"><</span></q> This is more content.</p>
    <p>Paragraph 3</p>
</div>

单击“.inline-comment-control”可以折叠注释：

$('#editor').delegate('.inline-comment-control', "click", function() {$(this).closest('.inline-comment').toggleClass('collapsed')});

我在这里有一个简单的jsfiddle：http://jsfiddle.net/bJELv/

我的挑战是，当用户将光标放在注释和退格键的右侧（或“删除”相反）时，折叠切换将被删除。

我希望发生的是整个.inline-comment及其所有子项被整体删除。

所以，我希望能够知道退格键要删除的内容。

作为一个令人满意的DIV，由于可能发生的无数行为，这被证明是困难的。它基本上似乎我必须复制浏览器用来确定做什么的逻辑（合并兄弟姐妹，删除父母以前兄弟姐妹的最后一个孩子等）。我已经尝试使用Rangy来确定选择之前的内容，但是我一直在运行不同标记增加复杂性的边缘情况（例如，注释位于标记内部或类似内容）。

我很确定没有办法轻松提取退格键的行为，所以另一个问题是，“是否有更好的方法来处理不删除span.inline-comment-control同时仍然离开span.comment只是可编辑的“？

或者，是否可以很好地描述浏览器应该在可信任的情况下使用退格键，因此我可以在JS中重现它？

我真的只对目标相对较新的浏览器感兴趣（没有IE＆lt; 9等），并且正在使用jquery和rangy。

我花了很多时间搜索SO，并且有一些有些相关的问题，但我发现没有任何与此问题直接相关的内容。

在contenteditable div中退格时测试/知道要删除的元素

0 个答案: