javascript - contentEditableの一部を削除できないようにする

Question

contentEditable Divがあり、その一部を削除から「保護」できるようにしたいと考えています。

たとえば、このcontentEditable DIVには、決して削除されたくないimgタグが含まれています。ただし、ユーザーが入力するときに、画像の周囲のテキストフローを維持する必要があります。

http://jsfiddle.net/uk6DA/16/

内部DIVのフォーマットを使用する方法、またはその他の方法はありますか。私は重要なイベントを試しましたが、これまでのところ、散発的な結果しか得られていません。

Answer 1

デモを見る

http://jsfiddle.net/uk6DA/21/

段落のみに contenteditable を適用する必要があります。

<div class="container" id="typer" style="border:1px solid gray; height:300px; width:520px; padding:4px; text-align:justify; text-justify:distribute-all-lines;">


        <img style="border:1px solid #cccccc; float: left; margin: 3px;" src="http://ts1.mm.bing.net/th?id=I4951402157179616&pid=1.7&w=139&h=136&c=7&rs=1" /><p>  
    If I Select All and press Delete, or press Backspace enough times, I can delete the troll.  Is there any way to make it impossible to delete the troll?<br/><br/>
    Curabitur nec metus arcu. Sed aliquam felis at leo luctus facilisis. Maecenas tortor urna, dignissim id imperdiet nec, vulputate a nisl. Morbi turpis augue, malesuada et viverra blandit, ultrices at eros. Ut id urna vitae odio iaculis ullamcorper. Proin tortor est, adipiscing id rutrum vitae, blandit ac purus. Maecenas eu turpis lectus, quis elementum nisi. Nullam lobortis, lectus eu ornare iaculis, felis lacus condimentum sapien, id laoreet velit neque at metus. Etiam scelerisque pulvinar dignissim. Proin rhoncus iaculis dolor, vel tincidunt velit feugiat quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tellus quam, gravida vel posuere at, elementum eu 


               <p> </div>​

JavaScript

$("#typer").click(function(){
$(this).children('p').attr('contentEditable','true');
});​

Answer 2

はい、簡単にできます。画像に属性を追加するだけcontenteditable="false"で、この属性を持つ要素は編集コマンドの影響を受けません。

したがって、基本的にimgタグは次のようになります。

 <img contenteditable="false" style="border:1px solid #cccccc; float: left; margin: 3px;" src="http://ts1.mm.bing.net/th?id=I4951402157179616&pid=1.7&w=139&h=136&c=7&rs=1" />  

それを表示するためにフィドルhttp://jsfiddle.net/uk6DA/17/