¿Cómo puedo averiguar el nodo DOM en el cursor en la ventana de contenido editable de un navegador usando Javascript?

Question

Estoy buscando una solución que funcione en navegador cruzado, es decir, IE, Firefox y Safari.

Answer 1

Por "ventana de contenido editable" Voy a suponer que quiere decir un elemento con contenteditable encendido o un documento con designMode encendido.

También hay dos casos a tener en cuenta: el caso cuando el usuario ha hecho una selección y el caso donde hay solo un símbolo de intercalación. El código siguiente funcionará en ambos casos y le proporcionará el elemento más interno que contiene la selección por completo. Si la selección está completamente contenida dentro de un nodo de texto, es un poco complicado obtener ese nodo de texto en IE (trivial en otros navegadores), así que no he proporcionado ese código aquí. Si lo necesitas, puedo desenterrarlo.

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

También puede utilizar el Rangy Biblioteca:

elementAtCursor = rangy.getSelection().anchorNode.parentNode