son - Insertar texto en Javascript contenteditable div

span contenteditable

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 hacer eso? 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

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 empezar):

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

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

He usado 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ó en otra respuesta, se pone feo si se desea un control más detallado, como insertar texto en otros lugares.

Answer 2

El rango y los objetos de selección

Usa los objetos de selección y rango . Estos contienen todo tipo de información sobre la selección actual y dónde se encuentra dentro del árbol de nodos.

Advertencia justa: no es del todo imposible hacer lo que describes, pero si te sientes muy elegante, estarás inmerso en las peculiaridades e incompatibilidades del navegador . Tendrá que hacer una gran cantidad de detección de objetos , verificando para asegurarse de que tiene valores y métodos consistentes. Comprueba incrementalmente todos tus navegadores a medida que te desarrolles. ¡Buena suerte!

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!")

Mientras que iFrame es igual al ID del iFrame previsto. O bien, puede usar una capa DIV utilizando document.getElementById ("IDofDIVlayer"). InnerHTML

Asegúrese de enfocarse 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 esta respuesta 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();
}
}
}