Soru İçerikli bir öğede html ile seçilen metni nasıl değiştirilir? [çift]


Bu sorunun zaten bir cevabı var:

Kapsamlı bir öğeyle, seçilen içeriği kendi htmlimle nasıl değiştirebilirim?


44
2018-06-06 12:24


Menşei


Bu sorunun ikinci kısmı (“kendi metin html ile değiştirilen metni değiştir”), bu kişinin bir kopyası olduğu için bir başvuru olarak bağlantılı olarak cevaplandırılmamıştır. - Brian M. Hunt
Yanıtlanan kısmı "soru başına bir soru" kuralına uymak için kaldırdım. - FakeRainBrigand


Cevaplar:


JsFiddle için bakınız: http://jsfiddle.net/dKaJ3/2/

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    alert(html);
}

Alınan kod Tim Down: Kullanıcı tarafından seçilen bir metinden HTML döndür


69
2018-06-06 12:45



Bu tanıdık geliyor ... stackoverflow.com/questions/4652734/... - Tim Down
Kodu başka bir cevaptan yeniden kullanmak iyidir, ancak nereden aldığınızı belirtmek kibar olur. - Tim Down
@ Tim Aşağı: Bu konuda üzgünüz. Kodu özmeyi biliyorum. Her zaman ilk olarak cevaplarımı bir metin editöründe biçimlendiririm ve sorunuzun sonunda bir bağlantı vardı ve sanırım yapıştırmadan önce her şeyi kopyalamamıştım (bunun için sözümü almak zorunda değilsiniz). Bu gerçekten benim tarafımdan dürüst bir hataydı ve cevabımı güncelleyeceğim. - Jordan Arron
Bu iyi :) Bu kodun uygun bir kullanımı oldu, herkesin kullanımı için ücretsizdir ve gerçekten umursamıyorum. - Tim Down
@Tim Down, sanırım bu sizin yasadınızı, diğer insanların sizin kodunuzu kullanması olabilir. Açıkça doğru cevaptı, kredi almak her zaman iyidir. - ars265


Seçilen HTML’yi almak için yazdığım işlevi kullanabilirsiniz. bu soru. Seçimi kendi HTML ile değiştirmek için bu işlev. Burada, bir DOM düğümü yerine bir HTML dizesi ekleyen değiştirici işlevinin bir sürümü var:

function replaceSelectionWithHtml(html) {
    var range;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.deleteContents();
        var div = document.createElement("div");
        div.innerHTML = html;
        var frag = document.createDocumentFragment(), child;
        while ( (child = div.firstChild) ) {
            frag.appendChild(child);
        }
        range.insertNode(frag);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(html);
    }
}

replaceSelectionWithHtml("<b>REPLACEMENT HTML</b>");

48
2018-06-06 13:41



Güzel Reaaaaaaaaaaaaaaaaly :) Teşekkürler Tim + 1 - Marwan
Soruya gerçekten cevap vermek için harika ve bonus puanları: sadece seçimi almamak, ancak değiştirmek. - tobek
Lütfen tanımlayınız node. Sanırım bu satırı silebiliriz. html = (node.nodeType == 3) ? node.data : node.outerHTML; - H Dog
@HDog: Evet, haklısın. Kaldırmayı unuttuğum kopya yapıştırılmış bir satır gibi görünüyor. Onu şimdi sildim. Teşekkürler. - Tim Down
@flen: var JavaScript'teki ifade, her değişkenin isteğe bağlı olarak bir başlangıç ​​değerine sahip olduğu, virgülle ayrılmış, tek bir ifadede birden fazla değişken bildirmenize olanak tanır. MDN hakkında daha fazla bilgi - Tim Down