如何防止从中删除“部分”<div contenteditable> 编辑的时候？

Question

如何防止用户在编辑期间删除 <div contenteditable> 编辑器中的 <section> （至少通过按“Delete”/“Backspace”键）？

 <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <style> #editor { width: 100%; height: 300px; border: 1px black solid; } #dont-remove-me-please{ width: 100%; height: 100px; border: 1px red dashed; font-weight: bold; user-select: none; } </style> </head> <body> <div id="app"></div> <div contenteditable="true" id="editor"> <div>hey guys!</div> <div><strong>more text...</strong></div> <section id="dont-remove-me-please" contenteditable="false">DONT' REMOVE ME!!!</section> <div><br></div> </div> <script> document.getElementById('editor').focus() </script> </body> </html>

谢谢你。

Answer 1

您可以将contenteditable=false设置为 children 以防止它们被编辑。

但是，如果您仍然希望子项可编辑但子 dom 元素不应该是可移动的，我认为您需要收听退格/删除事件并查看它们如何影响 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);

Answer 2

为了达到预期的结果，使用下面的点击事件监听器并根据 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>

代码示例 - https://codesandbox.io/s/rypy7wkn5m

 <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <style> #editor { width: 100%; height: 300px; border: 1px black solid; } #dont-remove-me-please{ width: 100%; height: 100px; border: 1px red dashed; font-weight: bold; user-select: none; } </style> </head> <body> <div id="app"></div> <div id="editor"> <div>hey guys!</div> <div><strong>more text...</strong></div> <section id="dont-remove-me-please" contenteditable="false">DONT' REMOVE ME!!!</section> <div><br></div> </div> <script> document.getElementById('editor').focus() </script> <script> document.getElementById('editor').addEventListener('click', function(e) { if(e.target.id !=="dont-remove-me-please"){ e.target.setAttribute("contentEditable", true); } }, false); </script> </body> </html>

如何防止从中删除“部分”<div contenteditable> 编辑的时候？

问题描述

2 个解决方案

解决方案1
0 2020-12-09 17:16:54

解决方案2
-1 2018-09-12 15:19:22

如何防止从中删除“部分”<div contenteditable> 编辑的时候？

问题描述

2 个解决方案

解决方案1 0 2020-12-09 17:16:54

解决方案2 -1 2018-09-12 15:19:22

解决方案1
0 2020-12-09 17:16:54

解决方案2
-1 2018-09-12 15:19:22