1

我正在使用基于 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。评论简单可编辑”？

或者，是否有一个很好的描述浏览器应该如何处理 contenteditable 上的退格，所以我可以在 JS 中重现它？

我真的只对针对相对现代的浏览器（没有 IE < 9 等）感兴趣，并且正在使用 jquery 和 rangy。

我花了相当多的时间搜索 SO，并且有一些相关的问题，但我没有发现任何与这个问题直接相关的东西。

4

0 回答 0