TypeScript dom-globals.Range類代碼示例

const fallback = (editor: Editor): FallbackFn => (html, done) => {
  const markedHtml = InternalHtml.mark(html);
  const outer = editor.dom.create('div', {
    'contenteditable': 'false',
    'data-mce-bogus': 'all'
  });
  const inner = editor.dom.create('div', { contenteditable: 'true' }, markedHtml);
  editor.dom.setStyles(outer, {
    position: 'fixed',
    top: '0',
    left: '-3000px',
    width: '1000px',
    overflow: 'hidden'
  });
  outer.appendChild(inner);
  editor.dom.add(editor.getBody(), outer);

  const range = editor.selection.getRng();
  inner.focus();

  const offscreenRange: Range = editor.dom.createRng();
  offscreenRange.selectNodeContents(inner);
  editor.selection.setRng(offscreenRange);

  setTimeout(() => {
    editor.selection.setRng(range);
    outer.parentNode.removeChild(outer);
    done();
  }, 0);
};

const rngSetContent = (rng: Range, fragment: DocumentFragment): void => {
  const firstChild = Option.from(fragment.firstChild).map(Element.fromDom);
  const lastChild = Option.from(fragment.lastChild).map(Element.fromDom);

  rng.deleteContents();
  rng.insertNode(fragment);

  const prevText = firstChild.bind(Traverse.prevSibling).filter(Node.isText).bind(removeEmpty);
  const nextText = lastChild.bind(Traverse.nextSibling).filter(Node.isText).bind(removeEmpty);

  // Join start
  Options.liftN([prevText, firstChild.filter(Node.isText)], (prev: Element, start: Element) => {
    prependData(start.dom(), prev.dom().data);
    Remove.remove(prev);
  });

  // Join end
  Options.liftN([nextText, lastChild.filter(Node.isText)], (next: Element, end: Element) => {
    const oldLength = end.dom().length;
    end.dom().appendData(next.dom().data);
    rng.setEnd(end.dom(), oldLength);
    Remove.remove(next);
  });

  rng.collapse(false);
};

 .map(function (newEndPos) {
   if (!CaretUtils.isInSameBlock(startPos, endPos, rootNode) && CaretUtils.isInSameBlock(startPos, newEndPos, rootNode)) {
     return createRange(startPos.container(), startPos.offset(), newEndPos.container(), newEndPos.offset());
   } else {
     return rng;
   }
 }).getOr(rng);

const moveStart = function (dom: DOMUtils, selection: Selection, rng: Range) {
  const offset = rng.startOffset;
  let container = rng.startContainer, walker, node, nodes;

  if (rng.startContainer === rng.endContainer) {
    if (isInlineBlock(rng.startContainer.childNodes[rng.startOffset])) {
      return;
    }
  }

  // Move startContainer/startOffset in to a suitable node
  if (container.nodeType === 1) {
    nodes = container.childNodes;
    if (offset < nodes.length) {
      container = nodes[offset];
      walker = new TreeWalker(container, dom.getParent(container, dom.isBlock));
    } else {
      container = nodes[nodes.length - 1];
      walker = new TreeWalker(container, dom.getParent(container, dom.isBlock));
      walker.next(true);
    }

    for (node = walker.current(); node; node = walker.next()) {
      if (node.nodeType === 3 && !isWhiteSpaceNode(node)) {
        rng.setStart(node, 0);
        selection.setRng(rng);

        return;
      }
    }
  }
};

const setEndPoint = (dom: DOMUtils, start: boolean, bookmark: PathBookmark, rng: Range) => {
  const point = bookmark[start ? 'start' : 'end'];
  let i, node, offset, children;
  const root = dom.getRoot();

  if (point) {
    offset = point[0];

    // Find container node
    for (node = root, i = point.length - 1; i >= 1; i--) {
      children = node.childNodes;

      if (padEmptyCaretContainer(root, node, rng)) {
        return true;
      }

      if (point[i] > children.length - 1) {
        if (padEmptyCaretContainer(root, node, rng)) {
          return true;
        }

        return tryFindRangePosition(node, rng);
      }

      node = children[point[i]];
    }

    // Move text offset to best suitable location
    if (node.nodeType === 3) {
      offset = Math.min(point[0], node.nodeValue.length);
    }

    // Move element offset to best suitable location
    if (node.nodeType === 1) {
      offset = Math.min(point[0], node.childNodes.length);
    }

    // Set offset within container node
    if (start) {
      rng.setStart(node, offset);
    } else {
      rng.setEnd(node, offset);
    }
  }

  return true;
};

const moveEndPoint = (dom, rng: Range, node, start: boolean): void => {
  const root = node, walker = new TreeWalker(node, root);
  const nonEmptyElementsMap = dom.schema.getNonEmptyElements();

  do {
    // Text node
    if (node.nodeType === 3 && Tools.trim(node.nodeValue).length !== 0) {
      if (start) {
        rng.setStart(node, 0);
      } else {
        rng.setEnd(node, node.nodeValue.length);
      }

      return;
    }

    // BR/IMG/INPUT elements but not table cells
    if (nonEmptyElementsMap[node.nodeName] && !/^(TD|TH)$/.test(node.nodeName)) {
      if (start) {
        rng.setStartBefore(node);
      } else {
        if (node.nodeName === 'BR') {
          rng.setEndBefore(node);
        } else {
          rng.setEndAfter(node);
        }
      }

      return;
    }

    // Found empty text block old IE can place the selection inside those
    if (Env.ie && Env.ie < 11 && dom.isBlock(node) && dom.isEmpty(node)) {
      if (start) {
        rng.setStart(node, 0);
      } else {
        rng.setEnd(node, 0);
      }

      return;
    }
  } while ((node = (start ? walker.next() : walker.prev())));

  // Failed to find any text node or other suitable location then move to the root of body
  if (root.nodeName === 'BODY') {
    if (start) {
      rng.setStart(root, 0);
    } else {
      rng.setEnd(root, root.childNodes.length);
    }
  }
};

const selectNode = (editor, node: Element): Range => {
  const e = editor.fire('BeforeObjectSelected', { target: node });
  if (e.isDefaultPrevented()) {
    return null;
  }

  return getNodeRange(node);
};

  const toRange = (): Range => {
    let range;

    range = createRange(container.ownerDocument);
    range.setStart(container, offset);
    range.setEnd(container, offset);

    return range;
  };

const deleteContentAndShowCaret = (editor: Editor, range: Range, node: Node, direction: HDirection, forward: boolean, peekCaretPosition: CaretPosition) => {
  const caretRange = CefUtils.showCaret(direction, editor, peekCaretPosition.getNode(!forward) as Element, forward, true);
  // Delete the selected content
  if (range.collapsed) {
    const deleteRange = range.cloneRange();
    if (forward) {
      deleteRange.setEnd(caretRange.startContainer, caretRange.startOffset);
    } else {
      deleteRange.setStart(caretRange.endContainer, caretRange.endOffset);
    }
    deleteRange.deleteContents();
  } else {
    range.deleteContents();
  }
  editor.selection.setRng(caretRange);
  trimEmptyTextNode(editor.dom, node);
  return true;
};

const insertFragment = (dom: DOMUtils, rng: Range, frag: DocumentFragment) => {
  const firstChild = Option.from(frag.firstChild);
  const lastChild = Option.from(frag.lastChild);

  rng.insertNode(frag);

  firstChild.each((child) => trimEmptyTextNode(dom, child.previousSibling));
  lastChild.each((child) => trimEmptyTextNode(dom, child.nextSibling));
};