javascript - ejemplos - html span editable

¿Cómo encontrar la posición del cursor en un 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. Así que prefiero usar DIV 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 idea de cómo puedo encontrarlo mediante algún cálculo o hay una funcionalidad de navegador nativa que me ayudaría a encontrar la posición del cursor en un DIV con contenido de contenido.

Answer 1

Si todo lo que desea hacer es insertar algún contenido en el cursor, no es necesario 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 principales:

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 prefieres 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);
    }
}

ACTUALIZAR

Siguiendo los comentarios del OP, sugiero usar mi propia biblioteca Rangy , que agrega un envoltorio al objeto IE TextRange que se comporta como un rango DOM. Un rango DOM consiste en un límite de inicio y fin, 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 artículo del MDC debería proporcionar alguna introducción.