¿Cómo encontrar la posición del cursor en una DIV contenteditable?

Question

Estoy escribiendo un autocompletador para un DIV editable de contenido (es necesario que muestre el contenido html en el cuadro de texto. Por lo tanto, prefiero usar DIV contenteditable sobre TEXTAREA). Ahora necesito encontrar la posición del cursor cuando hay un evento keyup/keydown/click en el DIV. Para que pueda insertar el html/texto en esa posición. No tengo ni idea de cómo puedo encontrarlo mediante algún cálculo o si hay una funcionalidad de navegador nativo que me ayude a encontrar la posición del cursor en una DIV contenta.

Answer 1

Si todo lo que quiere hacer es insertar algo de contenido en el cursor, no hay necesidad de encontrar su posición explícitamente. La siguiente función insertará un nodo DOM (elemento o nodo de texto) en la posición del cursor en todos los navegadores de escritorio convencionales:

function insertNodeAtCursor(node) { 
    var range, html; 
    if (window.getSelection && window.getSelection().getRangeAt) { 
     range = window.getSelection().getRangeAt(0); 
     range.insertNode(node); 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     html = (node.nodeType == 3) ? node.data : node.outerHTML; 
     range.pasteHTML(html); 
    } 
} 

Si prefiere insertar una cadena HTML:

function insertHtmlAtCursor(html) { 
    var range, node; 
    if (window.getSelection && window.getSelection().getRangeAt) { 
     range = window.getSelection().getRangeAt(0); 
     node = range.createContextualFragment(html); 
     range.insertNode(node); 
    } else if (document.selection && document.selection.createRange) { 
     document.selection.createRange().pasteHTML(html); 
    } 
} 

ACTUALIZACIÓN

Siguiendo los comentarios de la OP, se sugiere emplear mi propia Rangy biblioteca, que añade un envoltorio de IE TextRange objeto que se comporta como un rango DOM. Un DOM Range consiste en un límite de inicio y final, cada uno de los cuales se expresa en términos de un nodo y un desplazamiento dentro de ese nodo, y un conjunto de métodos para manipular el rango. El MDC article debe proporcionar alguna introducción.