Soru İçerikli bir div divanına html ekle


Ben bir contenteditable set ile div var ve enter tuşuna basıldığında preventDefault () çağırmak için jquery kullanarak tuşa basıyorum. Benzer bu soru hangi imlecin içine metin ekler, ben doğrudan bir html eklemek istiyorum, kısacası için onun br etiketi söyleyeceğiz. Yukarıdaki soruya verilen cevabı kullanmak, range.pasteHTML yöntemini kullandığı için IE'de gerçekten çalışır, ancak diğer tarayıcılarda br etiketi html değil düz metin olarak görünür. Metne değil html eklemek için cevabı nasıl değiştirebilirim?


59
2017-07-14 08:57


Menşei




Cevaplar:


Çoğu tarayıcıda, insertNode()  Seçimden elde ettiğiniz menzil yöntemi. IE <9'da kullanabilirsiniz pasteHTML(), bahsettiğin gibi. Aşağıda, tüm önemli tarayıcılarda bunu yapmak için bir işlev bulunur. İçerik zaten seçilmişse, değiştirilir, bu nedenle etkin bir macun işlemi olur. Ayrıca, eklenen içeriğin sonundan sonra karta yerleştirmek için kod ekledim.

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

Kod:

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);
    }
}

GÜNCELLEME 21 AĞUSTOS 2013

Yorumlarda belirtildiği gibi, eklenen içeriğin seçilip seçilmeyeceğini belirten ek bir parametreyle güncellenmiş bir örnek.

Demo: http://jsfiddle.net/timdown/jwvha/527/

Kod:

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();
        }
    }
}

157
2017-07-14 09:47



Tim gibi, cevabınız mükemmel. Çok teşekkürler! - Niall
@ think123: Seçimin belirli bir düğümde yer aldığını kontrol etmek için aşağıdaki gibi bir işlev kullanabilirsiniz: stackoverflow.com/a/8340432/96100 - Tim Down
@tundoopani: Çünkü jsFiddle onu pasteHtmlAtCaret () bir işlev onload Başka hiçbir şeyin göremediği bir işleyici. Görmek jsfiddle.net/jwvha/211 düzeltme için. - Tim Down
@Matt: Kullanımı document.execCommand() genellikle tarayıcının geri alma yığınıyla çalışır, böylece kullanabilirsiniz document.execCommand("InsertHTML", false, "<b>Some bold text</b>"). Ancak, geri alma işleminin hala bununla çalışmayacağını test etmedim ve IE bu komutu desteklemiyor. Son olarak, uzun vadede bunun çözümü olacak ve tarayıcılarda uygulanmaya başlayacak işlerde bir UndoManager spekası var: dvcs.w3.org/hg/undomanager/raw-file/tip/undomanager.html - Tim Down
@Ced, iframe'in pencere nesnesi. Referans için beni affet bu siteama bu sizin aradığınızı 10 saniyede bulduğum en basit örnek ... - gdoron


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";
};

11
2017-12-21 13:18





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() 

-2
2018-04-15 21:31