Question

我有一个contentEditable Div，我希望能够“保护”部分内容不被删除。

例如，我有这个contentEditable DIV，里面有一个img标签我想永远不会被删除。但是我需要在用户输入时保持图像周围的文本流。

有没有办法，使用内部DIV的格式，或任何其他方式。我已经尝试过key events，但到目前为止只有零星的结果。

Answer 1

看看演示

您需要仅对段落应用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/

使contentEditable的一部分无法删除

3 个答案: