there

there

关注
发信
关注(28)粉丝(399)

javascript - 使用insertNode防止跨度在另一个跨度内

我有这个代码。选择文本后，将显示一个包含颜色的div。单击其中一种颜色时，所选文本将包含该突出显示。但是，如何检查高光是否在另一个高光内部？如果突出显示在另一个突出显示内，则我希望出现警报，表明无法执行此操作。否则，将创建高光。

注意：您可以完全忽略html和css部分。

这是突出显示中突出显示的示例。我用黄色突出显示了There Hello There Hello There Hello短语。然后，我在黄色荧光笔e Hello There There Hello内高亮显示。

javascript - 使用insertNode防止跨度在另一个跨度内-LMLPHP



$("#tooltip").mousedown(function(event) {
  event.preventDefault();
});

//Only add the listener once, not another listener each mouseup
$(".boxes").click(function() {
  var selection = document.getSelection();
  var range = selection.getRangeAt(0);
  var contents = range.extractContents();
  var node = document.createElement("span");
  node.classList.add($(this).attr("data-mark"));
  node.appendChild(contents);
  // Go ahead and create the span
  range.insertNode(node);
  selection.removeAllRanges(); //Clear the selection, showing highlight
  hideTooltip();
});
function hideTooltip() {
  document.getElementById('tooltip').style.display = ''; //hide the tooltip
}
$("#actual_verse").mouseup(function() {
  var text = "";
  if (window.getSelection) {
    text = window.getSelection().toString();
  } else if (document.selection && document.selection.type != "Control") {
    text = document.selection.createRange().text;
  }
  if (/\S/.test(text)) {
    // Tool Tip
    var ele = document.getElementById('tooltip');
    var sel = window.getSelection();
    var rel1 = document.createRange();
    rel1.selectNode(document.getElementById('cal1'));
    var rel2 = document.createRange();
    rel2.selectNode(document.getElementById('cal2'));
    if (!sel.isCollapsed) {
      var r = sel.getRangeAt(0).getBoundingClientRect();
      var rb1 = rel1.getBoundingClientRect();
      var rb2 = rel2.getBoundingClientRect();
      //this will place ele below the selection
      ele.style.top = (r.bottom - rb2.top) * 100 / (rb1.top - rb2.top) + 'px';
      //this will align the right edges together
      ele.style.left = (r.left - rb2.left) * 100 / (rb1.left - rb2.left) + 'px';
      //code to set content
      ele.style.display = 'block';
    }
    // End of Tool Tip
  }
});

/* Highlighting */
.blue_mark {
  background: #AAF6FF;
  cursor: pointer;
}
.red_mark {
  background: #FF9B9F;
  cursor: pointer;
}
.green_mark {
  background: #D6FFAA;
  cursor: pointer;
}
.yellow_mark {
  background: #FFF8AA;
  cursor: pointer;
}
.orange_mark {
  background: #FFBF98;
  cursor: pointer;
}
.purple_mark {
  background: #D7D5FC;
  cursor: pointer;
}
/* End of Highlighting */

/* Tool Kit */
#tooltip {
  position: absolute;
  display: none;
  border: grey solid 1px;
  background: #373737;
  padding: 5px;
  border-radius: 3px;
}
#cal1 {
  position: absolute;
  height: 0px;
  width: 0px;
  top: 100px;
  left: 100px;
  overflow: none;
  z-index: -100;
}
#cal2 {
  position: absolute;
  height: 0px;
  width: 0px;
  top: 0;
  left: 0;
  overflow: none;
  z-index: -100;
}
.boxes {
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: inline-block;
  margin-right: 2px;
  position: relative;
  top: 3px;
}
#blue_box {
  background: #AAF6FF;
}
#green_box {
  background: #D6FFAA;
}
#orange_box {
  background: #FFBF98;
}
#purple_box {
  background: #D7D5FC;
}
#red_box {
  background: #FF9B9F;
}
#yellow_box {
  background: #FFF8AA;
}
.highlight {
  background: yellow;
}
/* End of Tool Kit */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'>Hello There Hello There Hello There Hello There! Hello There</span>
<div id='cal1'>&nbsp;</div>
<div id='cal2'>&nbsp;</div>
<div id='tooltip'>
  <div id='blue_box' class='boxes' title='Blue' data-mark='blue_mark'></div>
  <div id='green_box' class='boxes' title='Green' data-mark='green_mark'></div>
  <div id='yellow_box' class='boxes' title='Yellow' data-mark='yellow_mark'></div>
  <div id='orange_box' class='boxes' title='Orange' data-mark='orange_mark'></div>
  <div id='purple_box' class='boxes' title='Purple' data-mark='purple_mark'></div>
  <div id='red_box' class='boxes' title='Red' data-mark='red_mark'></div>
</div>

最佳答案

您可以强制选择在同一节点开始和结束，并检查父节点：

var verse = document.getElementById("actual_verse");
if(range.startContainer !== range.endContainer ||
   range.startContainer.parentElement !== verse ||
   range.endContainer.parentElement !== verse
) {
  alert("Not possible");
  return;
}





var verse = document.getElementById("actual_verse");

$("#tooltip").mousedown(function(event) {
  event.preventDefault();
});

//Only add the listener once, not another listener each mouseup
$(".boxes").click(function() {
  var selection = document.getSelection();
  var range = selection.getRangeAt(0);
  if(range.startContainer !== range.endContainer ||
     range.startContainer.parentElement !== verse ||
     range.endContainer.parentElement !== verse
  ) {
    alert("Not possible");
    return;
  }
  var contents = range.extractContents();
  var node = document.createElement("span");
  node.classList.add($(this).attr("data-mark"));
  node.appendChild(contents);
  // Go ahead and create the span
  range.insertNode(node);
  selection.removeAllRanges(); //Clear the selection, showing highlight
  hideTooltip();
});
function hideTooltip() {
  document.getElementById('tooltip').style.display = ''; //hide the tooltip
}
$("#actual_verse").mouseup(function() {
  var text = "";
  if (window.getSelection) {
    text = window.getSelection().toString();
  } else if (document.selection && document.selection.type != "Control") {
    text = document.selection.createRange().text;
  }
  if (/\S/.test(text)) {
    // Tool Tip
    var ele = document.getElementById('tooltip');
    var sel = window.getSelection();
    var rel1 = document.createRange();
    rel1.selectNode(document.getElementById('cal1'));
    var rel2 = document.createRange();
    rel2.selectNode(document.getElementById('cal2'));
    if (!sel.isCollapsed) {
      var r = sel.getRangeAt(0).getBoundingClientRect();
      var rb1 = rel1.getBoundingClientRect();
      var rb2 = rel2.getBoundingClientRect();
      //this will place ele below the selection
      ele.style.top = (r.bottom - rb2.top) * 100 / (rb1.top - rb2.top) + 'px';
      //this will align the right edges together
      ele.style.left = (r.left - rb2.left) * 100 / (rb1.left - rb2.left) + 'px';
      //code to set content
      ele.style.display = 'block';
    }
    // End of Tool Tip
  }
});

/* Highlighting */
.blue_mark {
  background: #AAF6FF;
  cursor: pointer;
}
.red_mark {
  background: #FF9B9F;
  cursor: pointer;
}
.green_mark {
  background: #D6FFAA;
  cursor: pointer;
}
.yellow_mark {
  background: #FFF8AA;
  cursor: pointer;
}
.orange_mark {
  background: #FFBF98;
  cursor: pointer;
}
.purple_mark {
  background: #D7D5FC;
  cursor: pointer;
}
/* End of Highlighting */

/* Tool Kit */
#tooltip {
  position: absolute;
  display: none;
  border: grey solid 1px;
  background: #373737;
  padding: 5px;
  border-radius: 3px;
}
#cal1 {
  position: absolute;
  height: 0px;
  width: 0px;
  top: 100px;
  left: 100px;
  overflow: none;
  z-index: -100;
}
#cal2 {
  position: absolute;
  height: 0px;
  width: 0px;
  top: 0;
  left: 0;
  overflow: none;
  z-index: -100;
}
.boxes {
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: inline-block;
  margin-right: 2px;
  position: relative;
  top: 3px;
}
#blue_box {
  background: #AAF6FF;
}
#green_box {
  background: #D6FFAA;
}
#orange_box {
  background: #FFBF98;
}
#purple_box {
  background: #D7D5FC;
}
#red_box {
  background: #FF9B9F;
}
#yellow_box {
  background: #FFF8AA;
}
.highlight {
  background: yellow;
}
/* End of Tool Kit */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'>Hello There Hello There Hello There Hello There! Hello There</span>
<div id='cal1'>&nbsp;</div>
<div id='cal2'>&nbsp;</div>
<div id='tooltip'>
  <div id='blue_box' class='boxes' title='Blue' data-mark='blue_mark'></div>
  <div id='green_box' class='boxes' title='Green' data-mark='green_mark'></div>
  <div id='yellow_box' class='boxes' title='Yellow' data-mark='yellow_mark'></div>
  <div id='orange_box' class='boxes' title='Orange' data-mark='orange_mark'></div>
  <div id='purple_box' class='boxes' title='Purple' data-mark='purple_mark'></div>
  <div id='red_box' class='boxes' title='Red' data-mark='red_mark'></div>
</div>

10-08 17:50
Powered by LMLPHP ©2024 there 0.027161