Nasıl bir web uygulaması yapıştır bir olay tespit ve veri yapıştırılan alabilirsiniz?

Metin zengin metin editörü yapıştırılır önce HTML içeriği kaldırmak istiyorum.

Daha sonra yapıştırılan sonra metin temizlik işleri, ama sorun önceki tüm biçimlendirme kaybolur. Örneğin, düzenleyici bir cümle yazmak ve kalın yapabilirim, ama yeni bir metin yapıştırmak, tüm biçimlendirme kaybolur. Yapıştırılan metni temiz ve herhangi bir önceki biçimlendirme değiştirlmesini istiyorum.

İdeal çözüm, tüm modern tarayıcılar () örneğin, MSIE, Kertenkele, Chrome ve Safari üzerinde çalışması gerekir.

MSIE clipboardData.getData(), ama benzer diğer tarayıcılar için işlevsellik bulamadım unutmayın.

Çözüm

IE6 , FF test 3.5 , Opera, Chrome, Safari son-ish sürümleri.

HTML

Şöyle: div bir etiket oluştur

<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div>

JavsScript

Aşağıdaki JavaScript kodu kullanın:

function handlepaste (elem, e) {
    var savedcontent = elem.innerHTML;
    if (e && e.clipboardData && e.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
        if (/text\/html/.test(e.clipboardData.types)) {
            elem.innerHTML = e.clipboardData.getData('text/html');
        }
        else if (/text\/plain/.test(e.clipboardData.types)) {
            elem.innerHTML = e.clipboardData.getData('text/plain');
        }
        else {
            elem.innerHTML = "";
        }
        waitforpastedata(elem, savedcontent);
        if (e.preventDefault) {
                e.stopPropagation();
                e.preventDefault();
        }
        return false;
    }
    else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
        elem.innerHTML = "";
        waitforpastedata(elem, savedcontent);
        return true;
    }
}

function waitforpastedata (elem, savedcontent) {
    if (elem.childNodes && elem.childNodes.length > 0) {
        processpaste(elem, savedcontent);
    }
    else {
        that = {
            e: elem,
            s: savedcontent
        }
        that.callself = function () {
            waitforpastedata(that.e, that.s)
        }
        setTimeout(that.callself,20);
    }
}

function processpaste (elem, savedcontent) {
    pasteddata = elem.innerHTML;
    //^^Alternatively loop through dom (elem.childNodes or elem.getElementsByTagName) here

    elem.innerHTML = savedcontent;

    // Do whatever with gathered data;
    alert(pasteddata);
}

Açıklama

onpaste olayı handlepaste fonksiyon eklenmiş ve geçirilen iki bağımsız değişkeni: this (yani bir referans unsuru olan olaydır bağlı) ve event olay nesnesi.

handlepaste fonksiyon:

İlk satır sadece sonunda tekrar geri yüklenebilir, bir değişken için düzenlenebilir div içeriğini kaydeder.

Tarayıcı olsun if Çek Y bir tarayıcı (chrome veya safari), ve eğer verileri yapıştırılan için düzenlenebilir div içeriğini ayarlar. O zaman y yapıştırma bir şey iki kez önlemek için olayı iptal eder. Bu y garip bir durum, ve eğer sadece div net bir şey yapıştır olmaz çünkü.

Eğer Y bir tarayıcı değilse o zaman sadece düzenlenebilir div temizler.

O zaman waitforpastedata işlevini çağırır

waitforpastedata fonksiyon:

Bu yapıştırılan verileri hemen görünmüyor, çünkü bu gereklidir, eğer sadece processpaste düz çağrılırsa hemen sonra işlem için herhangi bir veri olmayacaktı.

Ne olursa düzenlenebilir div sonra 20 milisaniye cinsinden aramalar zamanlayıcı kendisini arayıp tekrar kontrol etmek için ayarlar aksi takdirde processpaste, eğer herhangi bir içerik varsa, kontrol edin.

processpaste fonksiyon:

Bu işlev, kaydedilen innerHTML ve düzenlenebilir dıv (şimdi yapıştırılan veri) bir değişken, geri innerHTML ve düzenlenebilir div geri kendi özgün değer ve uyarı yapıştırılan veri. Gerçek bir kullanım senaryosunda belli ki muhtemelen onunla ne istersen yapabilirsin sadece uyarı verileri dışında, buradan bir şey isteyeyim.

Muhtemelen de veri sanitising sürecinin bir tür ile yapıştırılan veri çalıştırmak isteyeceksiniz. Bu da çıkarılan dize üzerinde hala düzenlenebilir div sırasında, ya da yapılabilir.

Gerçek bir sitution muhtemelen seçimden önce kaydedin ve sonra (Set cursor position on contentEditable <div>) geri isterim. Sonra imleci kullanıcı yapıştır eylemi başlattı zaman oldu konumunda yapıştırılan veri ekleyebilirsiniz.

P. S. Bu arada bu kod, YANİ <= 8 jsfiddle iş gibi görünmüyor, ama yaptığı iş yani <= 8'de olmayan bir jsfiddle ortam.