javascript - ejemplos - html span editable

Insertar texto en el cursor en un contenido editable

Question

Tengo un div contenteditable donde necesito insertar texto en la posición de intercalación,

Esto se puede hacer fácilmente en IE por document.selection.createRange().text = "banana"

¿Hay alguna forma similar de implementar esto en Firefox / Chrome?

(Sé que existe una solución here , pero no se puede usar en div contenteditable, y se ve torpe)

¡Gracias!

Answer 1

1. Obtiene un objeto de selección con window.getSelection() .
2. Utilice Selection.getRangeAt(0).insertNode() para agregar un textonodo.

3. Si es necesario, mueva la posición del cursor detrás del texto agregado con Selection.modify() . (No estandarizado, pero esta característica es compatible con Firefox, Chrome y Safari)

   function insertTextAtCursor(text)
   {
       let selection = window.getSelection();
       let range = selection.getRangeAt(0);
       range.deleteContents();
       let node = document.createTextNode(text);
       range.insertNode(node);
   
       for(let position = 0; position != text.length; position++)
       {
           selection.modify("move", "right", "character");
       };
   }

Answer 2

La siguiente función insertará texto en la posición de intercalación y eliminará la selección existente. Funciona en todos los navegadores de escritorio convencionales:

function insertTextAtCursor(text) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

ACTUALIZAR

Según los comentarios, aquí hay un código para guardar y restaurar la selección. Antes de mostrar su menú contextual, debe almacenar el valor de retorno de saveSelection en una variable y luego pasar esa variable a restoreSelection para restaurar la selección después de ocultar el menú contextual y antes de insertar texto.

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

Answer 3

simplemente un método más fácil con jquery:

copia todo el contenido de la div

var oldhtml=$(''#elementID'').html();

var tobejoined=''<span>hii</span>'';

//element with new html would be

$(''#elementID'').html(oldhtml+tobejoined);

¡sencillo!