编辑的时候？,javascript,dom,contenteditable"/>
时间戳

首页 > 解决方案 > 如何防止从

编辑的时候？

javascript - 如何防止从
编辑的时候？

问题描述

如何防止用户在编辑期间删除 <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>

谢谢你。

标签： javascriptdomcontenteditable

解决方案

您可以设置contenteditable=false为子项以防止它们可编辑。

但是，如果您仍然希望子元素是可编辑的，但子 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);

推荐阅读