Javascript 编辑时如何防止从中删除“section”？

如何至少通过按Delete/Backspace键来防止用户在编辑过程中删除内部编辑器

包裹沙箱 编辑{ 宽度：100%； 高度：300px； 边框：1px黑色实心； } 请不要把我带走{ 宽度：100%； 高度：100px； 边框：1px红色虚线； 字体大小：粗体； 用户选择：无； } 嘿，伙计们！ 更多文本。。。 不要把我赶走！！！ document.getElementById'editor'。焦点

---

要获得预期的结果，请使用下面的click event listener并基于id添加contenteditable属性

<script>
        document.getElementById('editor').addEventListener('click', function(e) { 
                     if(e.target.id !=="dont-remove-me-please"){
                         e.target.setAttribute("contentEditable", true);
                     }
                  }, false);
    </script>

代码示例-

包裹沙箱 编辑{ 宽度：100%； 高度：300px； 边框：1px黑色实心； } 请不要把我带走{ 宽度：100%； 高度：100px； 边框：1px红色虚线； 字体大小：粗体； 用户选择：无； } 嘿，伙计们！ 更多文本。。。 不要把我赶走！！！ document.getElementById'editor'。焦点 document.getElementById'editor'。addEventListener'click'，函数{ ife.target.id！==请不要删除我{ e、 target.setAttributecontentEditable，true； } }，假； 您可以将contenteditable=false设置为子项，以防止它们处于可编辑状态

但是，如果您仍然希望子dom元素是可编辑的，但子dom元素不应该是可移动的，那么我认为您需要监听backspace/delete事件，查看这些事件如何影响dom，并在移除dom节点时撤消更改。我自己想弄明白

编辑：这就是我所做的

function onpaste(e: ClipboardEvent) {
  e.preventDefault();

  const selection = window.getSelection();
  // Don't allow deleting nodes
  if (selection.anchorNode.isSameNode(selection.focusNode)) {
    // get text representation of clipboard
    const text = e.clipboardData.getData("text/plain");

    // insert text manually, but without new line characters as can't support <br/>s yet
    document.execCommand("insertHTML", false, text.replace(/\n/g, ""));
  }
}

function onkeydownInEditable(e: KeyboardEvent) {
  if (e.key === "Enter") {
    e.preventDefault();
  }
  if (e.key === "Backspace" || e.key === "Delete" || e.key === "Paste") {
    const selection = window.getSelection();
    // Don't allow deleting nodes
    if (!selection.anchorNode.isSameNode(selection.focusNode))
      e.preventDefault();
  }
}

 elementEditing.addEventListener("keydown", onkeydownInEditable);
 elementEditing.addEventListener("paste", onpaste);

---

如何防止它被移除？你能说得更具体一点吗？是的。在我的示例中，编辑期间不得删除节。至少我需要知道如何通过删除/退格键防止删除部分。谢谢你的回答。但其他div必须始终可编辑。此外，用户可以删除空字符串->连接divs…创建类，并使用该类按ClassName和addEventlistener循环元素-