使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');
});?