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

尝试使用类似的方法，将可编辑部分嵌套在不可编辑的元素中 -

<p> uneditable text 
<p contenteditable> editable text </p>
</p>

Answer 3

是的，您可以轻松地做到这一点。只需将属性添加到您的图像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/