不要通过按钮来删除，而是通过backspace删除，当遇到不可编辑元素时，自动选中该不可编辑元素

您可以通过使用`keydown`事件监听器来实现当用户按下 Backspace 键时删除不可编辑元素并自动选中该元素。

以下是一个示例代码：

<div id="editableDiv" contentEditable="true">
  <p>This is some text.</p>
  <img src="image.jpg" alt="image" contentEditable="false">
  <p>More text here.</p>
</div>

<script>
  var editableDiv = document.getElementById("editableDiv");
  var image = editableDiv.querySelector("img[contentEditable='false']");
  if (image) {
    image.addEventListener("keydown", function(event) {
      if (event.keyCode === 8) { // backspace key
        event.preventDefault();
        this.outerHTML = this.outerHTML.replace(/<img/, "<span contentEditable='false' class='selectedImg'").replace(/\/>/, "></span>");
        var selectedImg = document.querySelector(".selectedImg");
        selectedImg.focus();
        selectedImg.classList.remove("selectedImg");
      }
    });
  }
</script>

在上面的代码中，我们首先获取具有`contentEditable`属性为`true`的`<div>`元素，并检查该元素内是否有`contentEditable`属性为`false`的`<img>`元素。如果有，我们为该元素添加一个`keydown`事件监听器，以便在用户按下 Backspace 键时执行操作。在事件处理程序中，我们首先使用`preventDefault()`方法取消默认的删除操作。接下来，我们将该元素替换为一个具有`contentEditable`属性为`false`的`<span>`元素，并添加`selectedImg`类来标识该元素。然后，我们获取该元素并将焦点设置为该元素。最后，我们将`selectedImg`类从该元素中删除，以便它可以再次被选择。

请注意，这只是一种解决方法，您可以根据您的具体情况进行修改。