javascript - 如何在IE中的contentEditable div中获取选定的textnode？

Question

我正在尝试创建一个简单的文本编辑器，在 div 标签上使用 HTML5 contenteditable。如您所知，选定文本在 IE 中的处理方式截然不同。

    this.retrieveAnchorNode = function() {
      var anchorNode;
      if (document.selection)
        anchorNode = document.selection.createRange().parentElement();
      else if (document.getSelection)
        anchorNode = window.getSelection().anchorNode;
    }

我正在寻找一种方法来获取选定的文本节点(而不是文本本身)，就像我可以在其他浏览器上使用“anchorNode”和“focusNode”一样。我在 IE 上找到的唯一替代方法是“parentElement()”函数，它只能选择 contenteditable div 本身。

有什么想法吗？

Answer 1

这是您需要的函数版本，来自 IERange ，加上我的评论:

function getChildIndex(node) {
  var i = 0;
  while( (node = node.previousSibling) ) {
    i++;
  }
  return i;
}

function getTextRangeBoundaryPosition(textRange, isStart) {
  var workingRange = textRange.duplicate();
  workingRange.collapse(isStart);
  var containerElement = workingRange.parentElement();
  var workingNode = document.createElement("span");
  var comparison, workingComparisonType = isStart ?
    "StartToStart" : "StartToEnd";

  var boundaryPosition, boundaryNode;

  // Move the working range through the container's children, starting at
  // the end and working backwards, until the working range reaches or goes
  // past the boundary we're interested in
  do {
    containerElement.insertBefore(workingNode, workingNode.previousSibling);
    workingRange.moveToElementText(workingNode);
  } while ( (comparison = workingRange.compareEndPoints(
    workingComparisonType, textRange)) > 0 && workingNode.previousSibling);

  // We've now reached or gone past the boundary of the text range we're
  // interested in so have identified the node we want
  boundaryNode = workingNode.nextSibling;
  if (comparison == -1 && boundaryNode) {
    // This must be a data node (text, comment, cdata) since we've overshot.
    // The working range is collapsed at the start of the node containing
    // the text range's boundary, so we move the end of the working range
    // to the boundary point and measure the length of its text to get
    // the boundary's offset within the node
    workingRange.setEndPoint(isStart ? "EndToStart" : "EndToEnd", textRange);

    boundaryPosition = {
      node: boundaryNode,
      offset: workingRange.text.length
    };
  } else {
    // We've hit the boundary exactly, so this must be an element
    boundaryPosition = {
      node: containerElement,
      offset: getChildIndex(workingNode)
    };
  }

  // Clean up
  workingNode.parentNode.removeChild(workingNode);

  return boundaryPosition;
}

var textRange = document.selection.createRange();
var selectionStart = getTextRangeBoundaryPosition(textRange, true);
// selectionStart has properties 'node' and 'offset'