Insertar texto en el cursor en un div editable de contenido

No dudes en compartir nuestro espacio y códigos con otro, apóyanos para aumentar nuestra comunidad.

Solución:

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

function insertTextAtCaret(text) 
    var sel, range;
    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 el comentario, 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();
        
    

1. Obtenga un objeto de selección con window.getSelection().
2. Usar Selection.getRangeAt(0).insertNode() para agregar un nodo de texto.

3. Si es necesario, mueva la posición del cursor detrás del texto agregado con Selection.modify(). (No estandarizado, pero esta función 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");
       ;
   
   

UPD: desde ~2020 la solución es obsoleto (a pesar de que puede funcionar todavía)

// 

// const editable = document.getElementById('myeditable')
// editable.focus()
// document.execCommand('insertHTML', false, 'Banana')
document.execCommand('insertText', false, 'banana')

Recuerda que puedes dar recomendación a este tutorial si te valió la pena.

---

---

Utiliza Nuestro Buscador