我试图了解contentEditable的工作原理，并且在图像处理方面遇到了一些麻烦。我有一个按钮，可让您在contentEditable div中添加图像，效果很好，但是一旦图像进入并且按Enter在图像后添加新段落，它将自动在img标签周围添加div没有段落。关于如何避免这种情况的任何想法？
这是一些代码：
$("#image").on("click",function(e){
e.preventDefault();
var img = document.createElement("img");
img.setattribute("src","http://chaton076.vip-blog.com/medias/0906/chaton076-vip-blog-com-942100chats_005.jpg");
$("#contenuVisuel").append(img);
})
$("#html").on("click",function(e){
e.preventDefault();
var visu = $("#contenuVisuel");
var html = $("#contenuHtml");
html.val($.trim(visu.html()));
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contenuContainer">
<div id="toolbar">
<button id="image">
add Image
</button>
<button id=html>
html
</button>
</div>
<div id="zoneContenu">
<div id="contenuVisuel" contenteditable>
<p>Content</p>
</div>
<textarea name="contenuHtml" id="contenuHtml" cols="30" rows="10"></textarea>
</div>
</div>