Jak mogę znaleźć węzeł DOM przy kursie w edytowalnym oknie zawartości przeglądarki przy użyciu Javascript?

Question

Szukam rozwiązania, które działa w przeglądarce, np. IE, Firefox i Safari.

Answer 1

Przez "okno edycji zawartości" zakładam, że masz na myśli element z włączoną contenteditable lub dokument z włączoną designMode.

Istnieją również dwa przypadki do rozważenia: przypadek, w którym użytkownik dokonał selekcji i przypadek, w którym znajduje się tylko karetka. Poniższy kod zadziała w obu przypadkach i da ci najbardziej kompletny element, który całkowicie zawiera zaznaczenie. Jeśli wybór jest całkowicie zawarty w węźle tekstowym, to jest trochę skomplikowane, aby uzyskać ten węzeł tekstowy w IE (trywialny w innych przeglądarkach), więc nie podałem tutaj tego kodu. Jeśli tego potrzebujesz, mogę to wykopać.

function getSelectionContainerElement() { 
    var range, sel, container; 
    if (document.selection && document.selection.createRange) { 
     // IE case 
     range = document.selection.createRange(); 
     return range.parentElement(); 
    } else if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt) { 
      if (sel.rangeCount > 0) { 
       range = sel.getRangeAt(0); 
      } 
     } else { 
      // Old WebKit selection object has no getRangeAt, so 
      // create a range from other selection properties 
      range = document.createRange(); 
      range.setStart(sel.anchorNode, sel.anchorOffset); 
      range.setEnd(sel.focusNode, sel.focusOffset); 

      // Handle the case when the selection was selected backwards (from the end to the start in the document) 
      if (range.collapsed !== sel.isCollapsed) { 
       range.setStart(sel.focusNode, sel.focusOffset); 
       range.setEnd(sel.anchorNode, sel.anchorOffset); 
      } 
     } 

     if (range) { 
      container = range.commonAncestorContainer; 

      // Check if the container is a text node and return its parent if so 
      return container.nodeType === 3 ? container.parentNode : container; 
     } 
    } 
} 

Answer 2

Można również użyć Rangy Biblioteka:

elementAtCursor = rangy.getSelection().anchorNode.parentNode