Question

我可以通过创建跨度来突出显示文本，但是当我在高亮的跨度文本中使用透明的背景色创建跨度时，它仍然继承父标记的背景色，而不是采用透明的背景色。但是，文本将采用任何不透明的颜色。我基于http://help.dottoro.com/ljcvtcaw.php突出显示文本尤其是http://help.dottoro.com/external/examples/ljcvtcaw/execCommand_4.htm。

我过去也曾使用document.execCommand（'ForeColor'，false，yellow），它非常直观，可以删除或合并span标签，但从未删除过以此方式创建的span标签。

function Highlight(color) {
    document.designMode = "on";
    var sel = window.getSelection();
    sel.removeAllRanges();
    var range = document.createRange();
    range.setStart(editor.startContainer, editor.startOffset);
    range.setEnd(editor.endContainer, editor.endOffset);
    sel.addRange(range);
    if (!sel.isCollapsed) {
      var range = sel.getRangeAt(0);
      var startContainer = range.startContainer;
      var startOffset = range.startOffset;
      var endContainer = range.endContainer;
      var endOffset = range.endOffset;

  if(startContainer == endContainer){
    ColorizeNodeFromTo(startContainer, color, startOffset, endOffset);
  }
  else {
    if(startContainer.firstChild){
      var startLeaf = startContainer.childNodes[startOffset];
    }
    else {
      var startLeaf = GetNextLeaf(startContainer);
      ColorizeLeafFromTo(startContainer, color, startOffset, -1);
    }
    if(endContainer.firstChild){
      if(endOffset > 0){
        var endLeaf = endContainer.childNodes[endOffset-1];
      }
      else{
        var endLeaf = GetPreviousLeaf(endContainer);
      }
    }
    else{
      var endLeaf = GetPreviousLeaf(endContainer);
      ColorizeLeafFromTo(endContainer, color, 0, endOffset);
    }
    while(startLeaf){
      var nextLeaf = GetNextLeaf(startLeaf);
      ColorizeLeaf(startLeaf, color);
      if(startLeaf == endLeaf){
        break;
      }
      startLeaf = nextLeaf;
    }
  }
}

解决方案

我回过头来，使用execCommand函数重构了代码。

if (!sel.isCollapsed) {
   if (!document.execCommand("HiliteColor", false, color)) {
     document.execCommand("BackColor", false, color);
   }
}

这会动态创建和删除我想要的跨度。

从突出显示的句子中的一个单词删除背景色

0 个答案: