使用 execCommand 删除一个元素，使其不可撤销

Question

所以我尝试添加一个删除按钮，该按钮出现在 contenteditable 内的 hover 个元素上，然后单击删除按钮删除该元素。现在，我有这样的东西：

button.on("click", function() {
  item.remove();
  button.hide(); 
}

不过，我想让删除操作不可撤销，这样用户就可以按 command+z 来 undo 删除操作。据我所知，您必须使用 execCommand 来删除元素，才能执行此操作（不能选择用于撤消的自定义解决方案）。有没有办法以某种方式使用 execCommand 删除特定节点（甚至是无法选择的节点，如 iframe）？

Answer 1

有一个delete命令。您可以将选择设置为包含有问题的元素，调用命令，它将是不可撤销的，至少在下面的简单示例中，它适用于我尝试过的所有浏览器：

function deleteElement(id) {
  var el = document.getElementById("toBeDeleted");
  var range = document.createRange();
  range.selectNode(el);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  document.execCommand("delete", false, null);
}

  <input type="button" onmousedown="deleteElement('toBeDeleted'); return false" value="Delete">
  <div contenteditable="true">Use the button above to delete <b id="toBeDeleted">this bold text</b></div>

使用 execCommand 删除一个元素，使其不可撤销

Use execCommand to remove an element so it is undoable

javascript

jquery

contenteditable