如何删除突出显示的多个 html contenteditable 元素? [英] How to remove highlighted multiple html contenteditable elements?

问题描述

如何突出显示多个 HTML 元素并按 Backspace 键将其删除?WordPress 块编辑器和

解决方案

我们需要 2 个监听器:

• 1 - 在 mouseup 上，捕获选定的文本，并使用 TreeWalker 获取所有突出显示的元素并在 .blocks 上切换 selected 类.
• 2 - 在键盘上，这将捕捉退格

---

使用了这个并改进了答案.

$(document).on({'keyup':函数(e){if (e.which == 8)$('div.block.selected').remove();},'mouseup':getSelectedElementTags});函数 rangeIntersectsNode(range, node) {var nodeRange;如果(range.intersectsNode){返回 range.intersectsNode(node);} 别的 {nodeRange = node.ownerDocument.createRange();尝试 {nodeRange.selectNode(node);}赶上(e){nodeRange.selectNodeContents(node);}返回 range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;}}函数 getSelectedElementTags() {var win = 窗口；var 范围、sel、elmlist、treeWalker、containerElement；sel = win.getSelection();if (sel.toString().length == 0) 返回如果(sel.rangeCount > 0){范围 = sel.getRangeAt(0);}如果(范围){containerElement = range.commonAncestorContainer;如果(容器元素.节点类型！= 1){containerElement = containerElement.parentNode;}树行者 = win.document.createTreeWalker(容器元素，NodeFilter.SHOW_ELEMENT,功能(节点){返回 rangeIntersectsNode(range, node) ?NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;},错误的);elmlist = [treeWalker.currentNode];而 (treeWalker.nextNode()) {elmlist.push(treeWalker.currentNode);}elmlist.forEach(function(e) {如果 ($(e).hasClass('block')) {$(e).toggleClass('selected');}});sel.empty()}}

div.block.selected {背景颜色:#ddf；}div.block {边距:24px；边框底部:1px 实心 #ddd;字体大小: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">第一块

<div class="block block-2" contenteditable="true">第二块</div><div class="block block-3" contenteditable="true">第三块

<div class="block block-4">第四块</div>

How can I highlight multiple HTML elements and remove them by pressing the Backspace key? WordPress block editor and Editor.js has this feature. Users can select/ Highlight multiple block and remove them by pressing the Backspace key. From this code below, If I highlight by selecting(mouse) not by clicking the .block-1, .block-2, .block-3 and press Backspace key then it should delete these elements.

[NOTE]

1. Every block should have contenteditable attribute.
2. Please, go to Editor.js first for demo what I exact want.

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

解决方案

We need 2 listeners:

• 1 - on mouseup, which catches selected text, and use TreeWalker to get all the highlighted elements and toggle selected class on .blocks.
• 2 - on keyup, which will catch backspace

---

Edit:

Used This and improved the answer .

$(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>

这篇关于如何删除突出显示的多个 html contenteditable 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！