javascript - 当父元素是 contentEditable 时，是否可以防止子元素被删除？

Question

当一个元素是contentEditable时，它的子元素可以被删除。如果其中一个子元素不是 contentEditable，则无法编辑子元素的内容，但仍然可以删除元素本身。您可以在以下示例中看到这一点。

是否可以防止这些子元素被删除？

div {
  height: 100px;
  border: 1px solid #CCC;
  margin: 5px;
  padding: 5px;
  width: 300px;
}

span {
  color: #999;
}

<div contentEditable="true">Hello <span contentEditable="false">world</span>!</div>

Answer 1

如果你会使用类，那会很容易。

<div class="contentEditable">Hello <span class="contentNotEditable">world</span>!</div>
<div class="saveContent" style="display: none;"></div>

Javascript/Jquery 部分

<script>
$(".contentEditable").on("click",function(){
 // make blank .saveContent
 $(".saveContent").html("");

 // copy all contentNotEditable class which inside selected contentEditable class.
 $( this ).find(".contentNotEditable").clone().appendTo( ".saveContent" );

 // make blank contentEditable
 $( this ).html("");

 // clone contentNotEditable to contentEditable
 $( ".saveContent" ).find(".contentNotEditable").clone().appendTo( ".contentEditable" );
});
</script>