如何删除突出显示的多个html内容可编辑元素？

Question

如何通过按Backspace键突出显示多个HTML元素并删除它们？WordPress块编辑器和Editor.js具有此特性。用户可以选择/高亮显示多个block，并按下Backspace键将其删除。从下面的代码中，如果我通过选择(鼠标)来突出显示，而不是通过单击( .block-1, .block-2, .block-3 )并按Backspace键，那么它应该删除这些元素。

注意事项

1. 每个块都应该有可满足的属性。
2. 请先去Editor.js看看我到底想要什么。

<div class="block-1" contenteditable="true"> 1st Block </div>
<div class="block-2" contenteditable="true"> 2nd Block </div>
<div class="block-3" contenteditable="true"> 3rd Block </div>
<div class="block-4" contenteditable="true"> 4th Block </div>

​

​

Answer 1

我们需要两个听众：

• 1- on mouseup，它捕获选定的文本，并使用TreeWalker获取所有突出显示的元素，并在.blocks上切换selected类。
• 2-打开键，这将捕获回退空间。

编辑：

使用这并改进了答案。

​

$(document).on({
  'keyup': function(e) {
    if (e.which == 8)
      $('div.block.selected').remove();
  },
  'mouseup': getSelectedElementTags
});


function rangeIntersectsNode(range, node) {
  var nodeRange;
  if (range.intersectsNode) {
    return range.intersectsNode(node);
  } else {
    nodeRange = node.ownerDocument.createRange();
    try {
      nodeRange.selectNode(node);
    } catch (e) {
      nodeRange.selectNodeContents(node);
    }

    return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
      range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
  }
}

function getSelectedElementTags() {
  var win = window;
  var range, sel, elmlist, treeWalker, containerElement;
  sel = win.getSelection();
  if (sel.toString().length == 0) return
  if (sel.rangeCount > 0) {
    range = sel.getRangeAt(0);
  }

  if (range) {
    containerElement = range.commonAncestorContainer;
    if (containerElement.nodeType != 1) {
      containerElement = containerElement.parentNode;
    }

    treeWalker = win.document.createTreeWalker(
      containerElement,
      NodeFilter.SHOW_ELEMENT,
      function(node) {
        return rangeIntersectsNode(range, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
      },
      false
    );

    elmlist = [treeWalker.currentNode];
    while (treeWalker.nextNode()) {
      elmlist.push(treeWalker.currentNode);
    }
    elmlist.forEach(function(e) {
      if ($(e).hasClass('block')) {
        $(e).toggleClass('selected');
      }
    });
    sel.empty()
  }
}

div.block.selected {
  background-color: #ddf;
}

div.block {
  margin: 24px;
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" contenteditable="true">
  <div class="block block-1" contenteditable="true"> 1st Block</div>
  <div class="block block-2" contenteditable="true"> 2nd Block </div>
  <div class="block block-3" contenteditable="true"> 3rd Block</div>
  <div class="block block-4"> 4th Block </div>
</div>

​

Answer 2

CSS和contenteditable属性是不必要的。这是代码

​

var targeted;

document.getElementById('container').addEventListener('click', function(event) {
    console.log(event.target); // You can see here the targeted element
    if(event.target.id !== 'container') {
        targeted = event.target;
    } else {
        targeted = undefined;
    };
});

document.addEventListener('keydown', function(event) {
    if(event.keyCode === 8 && targeted) {
        targeted.parentNode.removeChild(targeted);
    };
});

#container {
    padding: 20px;
    background-color: black;
}
#container div {
    margin-bottom: 5px;
    height: 50px;
    width: 200px;
    background-color: white;
}

<div id="container">
    <div contenteditable="true">1</div>
    <div contenteditable="true">2</div>
    <div contenteditable="true">3</div>
    <div contenteditable="true">4</div>
    <div contenteditable="true">5</div>
</div>

​