I have a contentEditable Div, and I'd like to be able to "protect" portions of it from deletions.

For instance, I have this contentEditable DIV that has an img tag in it I'd like to never get deleted. But I need to maintain the text flow around the image as the user types.

/

Is there any way, using formatting of inner DIV's, or any other way. I have experimented with key events but so far only have had sporadic results.

I have a contentEditable Div, and I'd like to be able to "protect" portions of it from deletions.

For instance, I have this contentEditable DIV that has an img tag in it I'd like to never get deleted. But I need to maintain the text flow around the image as the user types.

http://jsfiddle/uk6DA/16/

Is there any way, using formatting of inner DIV's, or any other way. I have experimented with key events but so far only have had sporadic results.

• javascript
• jquery
• html

• You can put the img tag outside the editable div and with some css (or javascript) make it look the way want it, or you can do some finalizing action (when editing is done) to auto append the img tag to the div (this is not remended though) first and then the edited text – Petar Sabev Commented Aug 18, 2012 at 0:44
• I even had trouble with the finalizing action approach, using key events I mentioned. I guess I could work on that more, since nothing else seems to work. – Dave Commented Aug 18, 2012 at 2:20
• If I could put the image outside the div and still have the text wrap the same way, I'd do that, but can't figure out how. Anything that makes the text wrap that way, would need to be inside the div, and get deleted. – Dave Commented Aug 18, 2012 at 2:21

3 Answers 3

Look at the Demo

http://jsfiddle/uk6DA/21/

You need to apply the contenteditable for paragraphs only.

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

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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/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>

Try having something like this, where you nest the editable section in a non-editable element-

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

Yes you can do it easy way. Just add attribute to your image contenteditable="false" and element with this attribute wont be affected with edit mands.

so basically your img tag should look like this:

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

and fiddle to show it http://jsfiddle/uk6DA/17/