Contenteditable：防止内部元素被删除

Question

我有一个简单的 contenteditable 标记：

<div class="example" contenteditable="true">
     <div class="inside">Some content</div>
</div>

当我删除“ Some content ”时， class="inside" div 也会被删除。 有没有办法防止删除内容时删除内部div？

例如，这是我在删除内容后尝试制作的外观。

<div class="example" contenteditable="true">
     <div class="inside"></div> <!-- The div is not deleted -->
</div>

我环顾四周，但似乎没有明确的答案。

任何帮助将不胜感激。

谢谢。

Answer 1

这可能会帮助某人

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);

Answer 2

const example = document.querySelector(".example")

example.addEventListener("keydown", (e) => {
 if (e.keyCode == 8 || e.keyCode == 46) { // delete and del keys
   if (example.children.length === 1) { // last inner element 
     if (example.children[0].innerText < 1) { // last element is empty
       e.preventDefault()
     }
   } 
 })

Answer 3

 .inside, .example { display: inline; }

 <div class="example" contenteditable="true"> <div class="inside">Some content</div> </div>

也许有一种样式是内联级元素。

由于删除内容时宽度将为 0%。 您不能再次单击它或添加任何内容。

所以，我的解决方案将是

.inside, .example {
  display: block;
}

如果需要，您可以指定宽度。 :)

 .inside, .example { display: block; }

 <div class="example" contenteditable="true"> <div class="inside">Some content</div> </div>

Answer 4

您必须将contenteditable="true"添加到内部元素：

<div class="example">
     <div class="inside" contenteditable="true">Some content</div>
     <div class="inside">Some content</div> <!-- This one will not be deleted -->
     <div class="inside" contenteditable="true">Some content</div>
</div>