javascript - ejemplos - html span editable

Insertar html en el cursor en un div contenteditable

Question

Tengo un div con el juego contenteditable y estoy capturando la tecla presionando jquery para llamar a preventDefault () cuando se presiona la tecla enter. De forma similar a esta pregunta que inserta texto en el cursor, me gustaría insertar directamente html, para abreviar, diremos que es una etiqueta br. Usar la respuesta a la pregunta anterior realmente funciona en IE ya que usa el método range.pasteHTML, pero en otros buscadores la etiqueta br aparece como texto sin formato y no como html. ¿Cómo podría modificar la respuesta para insertar html y no texto?

Answer 1

En la mayoría de los navegadores, puede usar el método insertNode() del rango que obtiene de la selección. En IE <9 puedes usar pasteHTML() , como mencionaste. A continuación se muestra una función para hacer esto en todos los principales navegadores. Si el contenido ya está seleccionado, se reemplaza, por lo que esto es efectivamente una operación de pegar. Además, agregué código para colocar el símbolo de intercalación después del final del contenido insertado.

jsFiddle: http://jsfiddle.net/jwvha/1/

Código:

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.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 = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

ACTUALIZACIÓN 21 DE AGOSTO DE 2013

Tal como se solicitó en los comentarios, aquí hay un ejemplo actualizado con un parámetro adicional que especifica si se selecciona o no el contenido insertado.

Demostración: http://jsfiddle.net/timdown/jwvha/527/

Código:

function pasteHtmlAtCaret(html, selectPastedContent) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.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 = document.createElement("div");
            el.innerHTML = html;
            var frag = document.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 = document.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();
        }
    }
}

Answer 2

var doc = document.getElementById("your_iframe").contentWindow.document;

// IE <= 10
if (document.selection){
    var range = doc.selection.createRange();
        range.pasteHTML("<b>Some bold text</b>");

// IE 11 && Firefox, Opera .....
}else if(document.getSelection){
    var range = doc.getSelection().getRangeAt(0);
    var nnode = doc.createElement("b");
    range.surroundContents(nnode);
    nnode.innerHTML = "Some bold text";
};

Answer 3

var r = getSelection().getRangeAt(0);
r.insertNode(r.createContextualFragment(''<b>Hello</b>''));

//select this range
getSelection().removeAllRanges();
getSelection().addRange(r);
//collapse to end/start 
getSelection().collapseToEnd()