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とそのすべての子がモノリシックに削除されることです。
そこで、バックスペースキーで何が削除されようとしているのかを知りたいです。
contenteditable DIV であるため、無数の動作が発生する可能性があるため、これは困難であることがわかっています。基本的に、ブラウザーが何をすべきかを決定するために使用するロジックを複製する必要があるようです (兄弟をマージする、親の前の兄弟の最後の子を削除するなど)。Rangy を使用して、選択の前に何があるかを判断しようとしましたが、マークアップが異なると複雑さが増すというエッジケースに遭遇し続けます (たとえば、コメントがタグ内にある、または同様のもの)。
バックスペース キーの動作を簡単に抽出する方法はないと確信しているので、別の質問としては、「スパンを離れたまま、span.inline-comment-control を削除しないようにするためのより良い方法はありますか?コメントは簡単に編集できますか？
または、ブラウザーが contenteditable のバックスペースで何をすべきかについての適切な説明があるので、JS で再現できますか?
私は、比較的新しいブラウザー (IE < 9 など) をターゲットにすることにのみ関心があり、jquery と rangy を使用しています。
SO を検索するのにかなりの時間を費やしましたが、多少関連する質問がいくつかありますが、この質問に直接関連するものは何も見つかりませんでした。