Insertar texto en Javascript contenteditable div

Question

Tengo un problema donde necesito insertar un texto (cadena, puede o no tener etiquetas html) en un div. Tiene que ser un div y no un textarea.

¿Hay alguna forma de hacerlo? Antes que nada, necesito ubicar el cursor y luego insertar el texto en esa posición.

Es similar a la función insertAdjacentText, pero solo puede insertar antes o después de una etiqueta, y solo funciona en IE.

Consulte esta URL: http://yart.com.au/test/iframe.aspx. Observe cómo puede colocar el cursor en el div, necesitamos agregar texto en la ubicación del cursor.

Answer 1

la gama y la selección Objetos

Uso del selection y range objects. Estos contienen todo tipo de información sobre la selección actual y dónde se encuentra dentro del árbol de nodos.

Fair Warning: No es del todo imposible hacer lo que describes, pero si usted consigue muy elegante, que estará en bastante agua profunda de peculiaridades del navegador e incompatibilidades. Tendrás que hacer un montón de detección de objetos, asegurándote de que tienes valores y métodos consistentes. Comprueba incrementalmente todos tus navegadores a medida que te desarrollas. ¡Buena suerte!

Answer 2

Si todo lo que necesita hacer es insertar HTML en el punto de selección/inserción actual, eso es factible. Fuera de mi cabeza (para que comiences):

En IE, utiliza document.selection.createRange(). PasteHTML (theNewHTML).

En otros navegadores, debería poder usar document.execCommand ("InsertHTML", ...).

He utilizado este tipo de técnicas solo en iframes/documentos editables, no en divs, pero estas llamadas deberían funcionar si el div está enfocado, creo.

Como se advirtió otra respuesta, se pone feo si desea un control más detallado, como insertar texto en otros lugares.

Answer 3

También puede usar un método circular utilizando insertImage. Inserta una imagen falsa (o una pequeña) usando el comando exec "insertImage", luego usa Javascript para reemplazar el innerHTML para agregar el texto.

Por ejemplo:

iFrame.focus() 
iFrame.document.execCommand("insertImage", "", "fakeimage.jpg") 
iFrame.document.body.innerHTML=iFrame.document.body.innerHTML.replace("<img src=\"fakeimage.jpg\">", "MY CUSTOM <b>HTML</b> HERE!") 

Considerando iFrame es igual a la id de la iFrame pretendido. O bien, puede usar una capa DIV utilizando document.getElementById ("IDofDIVlayer"). InnerHTML

Asegúrese de enfocar antes de llamar a execCommand, de lo contrario puede no funcionar en IE.

Este método también funciona en IE. Probado.

Answer 4

Aquí hay un ejemplo de navegador cruzado, adaptado de this answer para trabajar con iframes.

function pasteHtmlAtCaret(html, selectPastedContent, iframe) { 
    var sel, range; 
    var win = iframe ? iframe.contentWindow : window; 
    var doc = win.document; 
    if (win.getSelection) { 
     // IE9 and non-IE 
     sel = win.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 

      // Range.createContextualFragment() would be useful here but is 
      // only relatively recently standardized and is not supported in 
      // some browsers (IE9, for one) 
      var el = doc.createElement("div"); 
      el.innerHTML = html; 
      var frag = doc.createDocumentFragment(), node, lastNode; 
      while ((node = el.firstChild)) { 
       lastNode = frag.appendChild(node); 
      } 
      var firstNode = frag.firstChild; 
      range.insertNode(frag); 

      // Preserve the selection 
      if (lastNode) { 
       range = range.cloneRange(); 
       range.setStartAfter(lastNode); 
       if (selectPastedContent) { 
        range.setStartBefore(firstNode); 
       } else { 
        range.collapse(true); 
       } 
       sel.removeAllRanges(); 
       sel.addRange(range); 
      } 
     } 
    } else if ((sel = doc.selection) && sel.type != "Control") { 
     // IE < 9 
     var originalRange = sel.createRange(); 
     originalRange.collapse(true); 
     sel.createRange().pasteHTML(html); 
     if (selectPastedContent) { 
      range = sel.createRange(); 
      range.setEndPoint("StartToStart", originalRange); 
      range.select(); 
     } 
    } 
}