Javascript 使部分内容可编辑无法删除

我有一个contentEditable Div，我希望能够“保护”它的某些部分不被删除

例如，我有一个contentEditable DIV，其中有一个img标记，我不想被删除。但我需要在用户键入时保持图像周围的文本流

---

是否有任何方法，使用内部DIV的格式，或任何其他方法。我做过实验，但到目前为止只有零星的结果。

是的，你可以用简单的方法来做。只需将属性添加到图像

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" />  

然后用小提琴来展示它

看看演示

您只需要将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>​

---

尝试这样做，将可编辑部分嵌套在不可编辑的元素中-

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

不可编辑的文本
可编辑文本

我仍然可以删除图像。在IE浏览器中测试。您可以将img标记放在可编辑的div之外，并使用一些css（或javascript）使其看起来像您想要的那样，或者您可以执行一些最终操作（编辑完成时）将img标记自动附加到div（但不建议这样做）首先，然后是编辑后的文本，我甚至在使用我提到的关键事件完成操作方法时遇到了问题。我想我还可以做更多的工作，因为其他的似乎都不管用。如果我可以把图像放在div之外，并且仍然以同样的方式包装文本，我会这样做，但我不知道怎么做。任何使文本以这种方式包装的内容都需要放在div中，然后被删除。太好了！通过对P元素应用最小高度，这也可以防止段落边界与图像重叠：。谢谢

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