Bagaimana aplikasi web mendeteksi acara tempel dan mengambil data yang akan ditempelkan?

Saya ingin menghapus konten HTML sebelum teks disisipkan ke editor teks kaya.

Membersihkan teks setelah disisipkan sesudahnya berfungsi, tetapi masalahnya adalah bahwa semua pemformatan sebelumnya hilang. Misalnya, saya bisa menulis kalimat di editor dan membuatnya tebal, tetapi ketika saya menempelkan teks baru, semua pemformatan hilang. Saya ingin membersihkan hanya teks yang disisipkan, dan membiarkan format sebelumnya tidak tersentuh.

Idealnya, solusinya harus bekerja di semua browser modern (misalnya, MSIE, Gecko, Chrome, dan Safari).

Perhatikan bahwa MSIE memiliki clipboardData.getData(), tetapi saya tidak dapat menemukan fungsionalitas yang serupa untuk browser lain.

Situasi telah berubah sejak menulis jawaban ini: sekarang Firefox telah menambahkan dukungan di versi 22, semua browser utama sekarang mendukung mengakses data clipboard dalam acara tempel. Lihat jawaban Nico Burns sebagai contoh.

Di masa lalu ini umumnya tidak mungkin dilakukan dengan cara lintas-browser. Yang ideal adalah untuk bisa mendapatkan konten yang disisipkan melalui pasteacara, yang dimungkinkan di browser terbaru tetapi tidak di beberapa browser lama (khususnya, Firefox <22).

Ketika Anda perlu mendukung browser lama, apa yang dapat Anda lakukan cukup terlibat dan sedikit peretasan yang akan bekerja di Firefox 2+, IE 5.5+ dan browser WebKit seperti Safari atau Chrome. Versi terbaru dari TinyMCE dan CKEditor menggunakan teknik ini:

1. Deteksi acara ctrl-v / shift-in menggunakan pengendali acara tombol ditekan
2. Dalam penangan itu, simpan pilihan pengguna saat ini, tambahkan elemen textarea off-screen (katakan di kiri -1000px) ke dokumen, matikan designModedan panggil focus()textarea, sehingga menggerakkan tanda sisipan dan secara efektif mengarahkan ulang pasta
3. Atur pengatur waktu yang sangat singkat (katakanlah 1 milidetik) di pengatur acara untuk memanggil fungsi lain yang menyimpan nilai textarea, menghapus textarea dari dokumen, menghidupkan designModekembali, mengembalikan pilihan pengguna dan menempelkan teks masuk.

Perhatikan bahwa ini hanya akan berfungsi untuk acara tempel keyboard dan bukan pasta dari konteks atau edit menu. Pada saat acara paste diaktifkan, sudah terlambat untuk mengarahkan ulang tanda sisipan ke dalam textarea (setidaknya di beberapa browser, setidaknya).

Jika Anda perlu mendukung Firefox 2, perhatikan bahwa Anda harus meletakkan textarea di dokumen induk daripada dokumen iframe editor WYSIWYG di peramban itu.

Solusi # 1 (Khusus Teks Biasa dan membutuhkan Firefox 22+)

Bekerja untuk IE6 +, FF 22+, Chrome, Safari, Edge (Hanya diuji di IE9 +, tetapi seharusnya berfungsi untuk versi yang lebih rendah)

Jika Anda memerlukan dukungan untuk menempelkan HTML atau Firefox <= 22, lihat Solusi # 2.

HTML

<div id='editableDiv' contenteditable='true'>Paste</div>

JavaScript

function handlePaste (e) {
    var clipboardData, pastedData;

    // Stop data actually being pasted into div
    e.stopPropagation();
    e.preventDefault();

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');
    
    // Do whatever with pasteddata
    alert(pastedData);
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

JSFiddle: https://jsfiddle.net/swL8ftLs/12/

Perhatikan bahwa solusi ini menggunakan parameter 'Teks' untuk getDatafungsi, yang tidak standar. Namun, ini berfungsi di semua browser pada saat penulisan.

Solusi # 2 (HTML dan berfungsi untuk Firefox <= 22)

Diuji dalam IE6 +, FF 3.5+, Chrome, Safari, Edge

HTML

<div id='div' contenteditable='true'>Paste</div>

JavaScript

var editableDiv = document.getElementById('editableDiv');

function handlepaste (e) {
    var types, pastedData, savedContent;
    
    // Browsers that support the 'text/html' type in the Clipboard API (Chrome, Firefox 22+)
    if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {
            
        // Check for 'text/html' in types list. See abligh's answer below for deatils on
        // why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
        // Safari/Edge don't advertise HTML data even if it is available
        types = e.clipboardData.types;
        if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {
        
            // Extract data and pass it to callback
            pastedData = e.clipboardData.getData('text/html');
            processPaste(editableDiv, pastedData);

            // Stop the data from actually being pasted
            e.stopPropagation();
            e.preventDefault();
            return false;
        }
    }
    
    // Everything else: Move existing element contents to a DocumentFragment for safekeeping
    savedContent = document.createDocumentFragment();
    while(editableDiv.childNodes.length > 0) {
        savedContent.appendChild(editableDiv.childNodes[0]);
    }
    
    // Then wait for browser to paste content into it and cleanup
    waitForPastedData(editableDiv, savedContent);
    return true;
}

function waitForPastedData (elem, savedContent) {

    // If data has been processes by browser, process it
    if (elem.childNodes && elem.childNodes.length > 0) {
    
        // Retrieve pasted content via innerHTML
        // (Alternatively loop through elem.childNodes or elem.getElementsByTagName here)
        var pastedData = elem.innerHTML;
        
        // Restore saved content
        elem.innerHTML = "";
        elem.appendChild(savedContent);
        
        // Call callback
        processPaste(elem, pastedData);
    }
    
    // Else wait 20ms and try again
    else {
        setTimeout(function () {
            waitForPastedData(elem, savedContent)
        }, 20);
    }
}

function processPaste (elem, pastedData) {
    // Do whatever with gathered data;
    alert(pastedData);
    elem.focus();
}

// Modern browsers. Note: 3rd argument is required for Firefox <= 6
if (editableDiv.addEventListener) {
    editableDiv.addEventListener('paste', handlepaste, false);
}
// IE <= 8
else {
    editableDiv.attachEvent('onpaste', handlepaste);
}

JSFiddle: https://jsfiddle.net/nicoburns/wrqmuabo/23/

Penjelasan

The onpasteevent dari divmemiliki handlePastefungsi yang melekat padanya dan melewati argumen tunggal: eventobjek untuk acara paste. Yang menarik bagi kami adalah clipboardDataproperti acara ini yang memungkinkan akses clipboard di browser non-ie. Di IE, yang setara adalah window.clipboardData, meskipun ini memiliki API yang sedikit berbeda.

Lihat bagian sumber daya di bawah ini.

The handlepasteFungsi:

Fungsi ini memiliki dua cabang.

Pemeriksaan pertama untuk keberadaan event.clipboardDatadan memeriksa apakah typesproperti itu mengandung 'teks / html' ( typesbisa berupa DOMStringListyang diperiksa menggunakan containsmetode, atau string yang diperiksa menggunakan indexOfmetode). Jika semua kondisi ini terpenuhi, maka kami melanjutkan seperti dalam solusi # 1, kecuali dengan 'teks / html' alih-alih 'teks / polos'. Ini saat ini berfungsi di Chrome dan Firefox 22+.

Jika metode ini tidak didukung (semua browser lain), maka kami

1. Simpan konten elemen ke a DocumentFragment
2. Kosongkan elemennya
3. Panggil waitForPastedDatafungsinya

The waitforpastedataFungsi:

Fungsi ini pertama-tama memberikan jajak pendapat untuk data yang di-paste (sekali per 20 ms), yang diperlukan karena tidak langsung muncul. Ketika data telah muncul itu:

1. Menyimpan innerHTML dari div yang dapat diedit (yang sekarang menjadi data yang disisipkan) ke variabel
2. Kembalikan konten yang disimpan di DocumentFragment
3. Memanggil fungsi 'processPaste' dengan data yang diambil

Itu processpasteFungsi:

Apakah hal-hal yang sewenang-wenang dengan data yang di-paste. Dalam hal ini kami hanya memberitahukan data, Anda dapat melakukan apa pun yang Anda suka. Anda mungkin ingin menjalankan data yang di-paste melalui semacam proses sanitasi data.

Menyimpan dan mengembalikan posisi kursor

Dalam situasi nyata Anda mungkin ingin menyimpan pilihan sebelumnya, dan mengembalikannya setelah itu ( Tetapkan posisi kursor pada contentEditable <div> ). Anda kemudian bisa menyisipkan data yang di-paste di posisi kursor ketika pengguna memulai tindakan tempel.

Sumber:

• Acara tempel MDN: https://developer.mozilla.org/en-US/docs/Web/Events/paste
• Papan klip MSDN: https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
• DocumentNragment MDN: https://developer.mozilla.org/en/docs/Web/API/DocumentFragment
• MDN DomStringList: https://developer.mozilla.org/en/docs/Web/API/DOMStringList

Terima kasih kepada Tim Down untuk menyarankan penggunaan DocumentFragment, dan abligh untuk menangkap kesalahan di Firefox karena penggunaan DOMStringList bukan string untuk clipboardData.types

Versi sederhana:

document.querySelector('[contenteditable]').addEventListener('paste', (e) => {
    e.preventDefault();
    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
    window.document.execCommand('insertText', false, text);
});

Menggunakan clipboardData

Demo: http://jsbin.com/nozifexasu/edit?js,output

Edge, Firefox, Chrome, Safari, Opera diuji.

⚠ Document.execCommand () sudah usang sekarang.

Catatan: Ingatlah untuk memeriksa juga input / output di sisi server (seperti tag-strip PHP )

Demo Langsung

Diuji pada Chrome / FF / IE11

Ada gangguan Chrome / IE yang mana browser ini menambahkan <div>elemen untuk setiap baris baru. Ada posting tentang ini di sini dan itu bisa diperbaiki dengan mengatur elemen contenteditable menjadidisplay:inline-block

Pilih beberapa HTML yang disorot dan rekatkan di sini:

function onPaste(e){
  var content;
  e.preventDefault();

  if( e.clipboardData ){
    content = e.clipboardData.getData('text/plain');
    document.execCommand('insertText', false, content);
    return false;
  }
  else if( window.clipboardData ){
    content = window.clipboardData.getData('Text');
    if (window.getSelection)
      window.getSelection().getRangeAt(0).insertNode( document.createTextNode(content) );
  }
}


/////// EVENT BINDING /////////
document.querySelector('[contenteditable]').addEventListener('paste', onPaste);

[contenteditable]{ 
  /* chroem bug: https://stackoverflow.com/a/24689420/104380 */
  display:inline-block;
  width: calc(100% - 40px);
  min-height:120px; 
  margin:10px;
  padding:10px;
  border:1px dashed green;
}

/* 
 mark HTML inside the "contenteditable"  
 (Shouldn't be any OFC!)'
*/
[contenteditable] *{
  background-color:red;
}

<div contenteditable></div>

Saya telah menulis sedikit bukti konsep untuk proposal Tim Downs di sini dengan textarea di luar layar. Dan begini kodenya:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script language="JavaScript">
 $(document).ready(function()
{

var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67;

$(document).keydown(function(e)
{
    if (e.keyCode == ctrlKey) ctrlDown = true;
}).keyup(function(e)
{
    if (e.keyCode == ctrlKey) ctrlDown = false;
});

$(".capture-paste").keydown(function(e)
{
    if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){
        $("#area").css("display","block");
        $("#area").focus();         
    }
});

$(".capture-paste").keyup(function(e)
{
    if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){                      
        $("#area").blur();
        //do your sanitation check or whatever stuff here
        $("#paste-output").text($("#area").val());
        $("#area").val("");
        $("#area").css("display","none");
    }
});

});
</script>

</head>
<body class="capture-paste">

<div id="paste-output"></div>


    <div>
    <textarea id="area" style="display: none; position: absolute; left: -99em;"></textarea>
    </div>

</body>
</html>

Cukup salin dan tempel seluruh kode ke dalam satu file html dan coba tempel (menggunakan ctrl-v) teks dari clipboard di mana saja pada dokumen.

Saya sudah mengujinya di IE9 dan versi baru Firefox, Chrome dan Opera. Bekerja dengan cukup baik. Juga baik bahwa seseorang dapat menggunakan kombinasi tombol apa pun yang ia sukai untuk melakukan triger fungsi ini. Tentu saja jangan lupa untuk menyertakan sumber jQuery.

Jangan ragu untuk menggunakan kode ini dan jika Anda datang dengan beberapa perbaikan atau masalah, silakan kirim kembali. Perhatikan juga bahwa saya bukan pengembang Javascript sehingga saya mungkin melewatkan sesuatu (=> lakukan testign Anda sendiri).

Berdasarkan l2aelba anwser. Ini diuji pada FF, Safari, Chrome, IE (8,9,10 dan 11)

    $("#editText").on("paste", function (e) {
        e.preventDefault();

        var text;
        var clp = (e.originalEvent || e).clipboardData;
        if (clp === undefined || clp === null) {
            text = window.clipboardData.getData("text") || "";
            if (text !== "") {
                if (window.getSelection) {
                    var newNode = document.createElement("span");
                    newNode.innerHTML = text;
                    window.getSelection().getRangeAt(0).insertNode(newNode);
                } else {
                    document.selection.createRange().pasteHTML(text);
                }
            }
        } else {
            text = clp.getData('text/plain') || "";
            if (text !== "") {
                document.execCommand('insertText', false, text);
            }
        }
    });

Yang ini tidak menggunakan setTimeout ().

Saya telah menggunakan ini artikel bagus untuk mencapai dukungan lintas browser.

$(document).on("focus", "input[type=text],textarea", function (e) {
    var t = e.target;
    if (!$(t).data("EventListenerSet")) {
        //get length of field before paste
        var keyup = function () {
            $(this).data("lastLength", $(this).val().length);
        };
        $(t).data("lastLength", $(t).val().length);
        //catch paste event
        var paste = function () {
            $(this).data("paste", 1);//Opera 11.11+
        };
        //process modified data, if paste occured
        var func = function () {
            if ($(this).data("paste")) {
                alert(this.value.substr($(this).data("lastLength")));
                $(this).data("paste", 0);
                this.value = this.value.substr(0, $(this).data("lastLength"));
                $(t).data("lastLength", $(t).val().length);
            }
        };
        if (window.addEventListener) {
            t.addEventListener('keyup', keyup, false);
            t.addEventListener('paste', paste, false);
            t.addEventListener('input', func, false);
        }
        else {//IE
            t.attachEvent('onkeyup', function () {
                keyup.call(t);
            });
            t.attachEvent('onpaste', function () {
                paste.call(t);
            });
            t.attachEvent('onpropertychange', function () {
                func.call(t);
            });
        }
        $(t).data("EventListenerSet", 1);
    }
}); 

Kode ini diperpanjang dengan pegangan seleksi sebelum menempel: demo

Untuk membersihkan teks yang disisipkan dan mengganti teks yang saat ini dipilih dengan teks yang disisipkan masalah cukup sepele:

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

JS:

function handlepaste(el, e) {
  document.execCommand('insertText', false, e.clipboardData.getData('text/plain'));
  e.preventDefault();
}

Ini harus bekerja pada semua browser yang mendukung acara onpaste dan pengamat mutasi.

Solusi ini lebih dari sekadar mendapatkan teks saja, ini sebenarnya memungkinkan Anda untuk mengedit konten yang ditempelkan sebelum disisipkan ke dalam elemen.

Ia bekerja dengan menggunakan event onpaste yang dapat diedit (didukung oleh semua browser utama) pengamat mutasi (didukung oleh Chrome, Firefox dan IE11 +)

Langkah 1

Buat elemen HTML dengan contenteditable

<div contenteditable="true" id="target_paste_element"></div>

Langkah 2

Dalam kode Javascript Anda, tambahkan acara berikut

document.getElementById("target_paste_element").addEventListener("paste", pasteEventVerifierEditor.bind(window, pasteCallBack), false);

Kita perlu mengikat pasteCallBack, karena pengamat mutasi akan dipanggil secara tidak sinkron.

langkah 3

Tambahkan fungsi berikut ke kode Anda

function pasteEventVerifierEditor(callback, e)
{
   //is fired on a paste event. 
    //pastes content into another contenteditable div, mutation observer observes this, content get pasted, dom tree is copied and can be referenced through call back.
    //create temp div
    //save the caret position.
    savedCaret = saveSelection(document.getElementById("target_paste_element"));

    var tempDiv = document.createElement("div");
    tempDiv.id = "id_tempDiv_paste_editor";
    //tempDiv.style.display = "none";
    document.body.appendChild(tempDiv);
    tempDiv.contentEditable = "true";

    tempDiv.focus();

    //we have to wait for the change to occur.
    //attach a mutation observer
    if (window['MutationObserver'])
    {
        //this is new functionality
        //observer is present in firefox/chrome and IE11
        // select the target node
        // create an observer instance
        tempDiv.observer = new MutationObserver(pasteMutationObserver.bind(window, callback));
        // configuration of the observer:
        var config = { attributes: false, childList: true, characterData: true, subtree: true };

        // pass in the target node, as well as the observer options
        tempDiv.observer.observe(tempDiv, config);

    }   

}



function pasteMutationObserver(callback)
{

    document.getElementById("id_tempDiv_paste_editor").observer.disconnect();
    delete document.getElementById("id_tempDiv_paste_editor").observer;

    if (callback)
    {
        //return the copied dom tree to the supplied callback.
        //copy to avoid closures.
        callback.apply(document.getElementById("id_tempDiv_paste_editor").cloneNode(true));
    }
    document.body.removeChild(document.getElementById("id_tempDiv_paste_editor"));

}

function pasteCallBack()
{
    //paste the content into the element.
    restoreSelection(document.getElementById("target_paste_element"), savedCaret);
    delete savedCaret;

    pasteHtmlAtCaret(this.innerHTML, false, true);
}   


saveSelection = function(containerEl) {
if (containerEl == document.activeElement)
{
    var range = window.getSelection().getRangeAt(0);
    var preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(containerEl);
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    var start = preSelectionRange.toString().length;

    return {
        start: start,
        end: start + range.toString().length
    };
}
};

restoreSelection = function(containerEl, savedSel) {
    containerEl.focus();
    var charIndex = 0, range = document.createRange();
    range.setStart(containerEl, 0);
    range.collapse(true);
    var nodeStack = [containerEl], node, foundStart = false, stop = false;

    while (!stop && (node = nodeStack.pop())) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                range.setEnd(node, savedSel.end - charIndex);
                stop = true;
            }
            charIndex = nextCharIndex;
        } else {
            var i = node.childNodes.length;
            while (i--) {
                nodeStack.push(node.childNodes[i]);
            }
        }
    }

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

function pasteHtmlAtCaret(html, returnInNode, selectPastedContent) {
//function written by Tim Down

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();
            if (returnInNode)
            {
                range.setStart(lastNode, 0); //this part is edited, set caret inside pasted node.
            }
            else
            {
                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();
    }
}
}

Apa yang dilakukan kode:

1. Seseorang menyalakan acara tempel dengan menggunakan ctrl-v, konteksmenu atau cara lain
2. Dalam acara tempel elemen baru dengan contenteditable dibuat (elemen dengan contenteditable memiliki hak istimewa yang ditingkatkan)
3. Posisi tanda titik dari elemen target disimpan.
4. Fokus diatur ke elemen baru
5. Konten akan disisipkan ke elemen baru dan diberikan di DOM.
6. Pengamat mutasi menangkap ini (ia mencatat semua perubahan pada pohon dom dan konten). Kemudian jalankan acara mutasi.
7. Dom konten yang disisipkan akan dikloning ke dalam variabel dan kembali ke panggilan balik. Elemen sementara dihancurkan.
8. Callback menerima DOM hasil kloning. Tanda sisipan dipulihkan. Anda dapat mengedit ini sebelum menambahkannya ke target Anda. elemen. Dalam contoh ini saya menggunakan fungsi Tim Downs untuk menyimpan / mengembalikan tanda sisipan dan menempelkan HTML ke dalam elemen.

Contoh

document.getElementById("target_paste_element").addEventListener("paste", pasteEventVerifierEditor.bind(window, pasteCallBack), false);


function pasteEventVerifierEditor(callback, e) {
  //is fired on a paste event. 
  //pastes content into another contenteditable div, mutation observer observes this, content get pasted, dom tree is copied and can be referenced through call back.
  //create temp div
  //save the caret position.
  savedCaret = saveSelection(document.getElementById("target_paste_element"));

  var tempDiv = document.createElement("div");
  tempDiv.id = "id_tempDiv_paste_editor";
  //tempDiv.style.display = "none";
  document.body.appendChild(tempDiv);
  tempDiv.contentEditable = "true";

  tempDiv.focus();

  //we have to wait for the change to occur.
  //attach a mutation observer
  if (window['MutationObserver']) {
    //this is new functionality
    //observer is present in firefox/chrome and IE11
    // select the target node
    // create an observer instance
    tempDiv.observer = new MutationObserver(pasteMutationObserver.bind(window, callback));
    // configuration of the observer:
    var config = {
      attributes: false,
      childList: true,
      characterData: true,
      subtree: true
    };

    // pass in the target node, as well as the observer options
    tempDiv.observer.observe(tempDiv, config);

  }

}



function pasteMutationObserver(callback) {

  document.getElementById("id_tempDiv_paste_editor").observer.disconnect();
  delete document.getElementById("id_tempDiv_paste_editor").observer;

  if (callback) {
    //return the copied dom tree to the supplied callback.
    //copy to avoid closures.
    callback.apply(document.getElementById("id_tempDiv_paste_editor").cloneNode(true));
  }
  document.body.removeChild(document.getElementById("id_tempDiv_paste_editor"));

}

function pasteCallBack() {
  //paste the content into the element.
  restoreSelection(document.getElementById("target_paste_element"), savedCaret);
  delete savedCaret;

  //edit the copied content by slicing
  pasteHtmlAtCaret(this.innerHTML.slice(3), false, true);
}


saveSelection = function(containerEl) {
  if (containerEl == document.activeElement) {
    var range = window.getSelection().getRangeAt(0);
    var preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(containerEl);
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    var start = preSelectionRange.toString().length;

    return {
      start: start,
      end: start + range.toString().length
    };
  }
};

restoreSelection = function(containerEl, savedSel) {
  containerEl.focus();
  var charIndex = 0,
    range = document.createRange();
  range.setStart(containerEl, 0);
  range.collapse(true);
  var nodeStack = [containerEl],
    node, foundStart = false,
    stop = false;

  while (!stop && (node = nodeStack.pop())) {
    if (node.nodeType == 3) {
      var nextCharIndex = charIndex + node.length;
      if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
        range.setStart(node, savedSel.start - charIndex);
        foundStart = true;
      }
      if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
        range.setEnd(node, savedSel.end - charIndex);
        stop = true;
      }
      charIndex = nextCharIndex;
    } else {
      var i = node.childNodes.length;
      while (i--) {
        nodeStack.push(node.childNodes[i]);
      }
    }
  }

  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}

function pasteHtmlAtCaret(html, returnInNode, selectPastedContent) {
  //function written by Tim Down

  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();
        if (returnInNode) {
          range.setStart(lastNode, 0); //this part is edited, set caret inside pasted node.
        } else {
          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();
    }
  }
}

div {
  border: 1px solid black;
  height: 50px;
  padding: 5px;
}

<div contenteditable="true" id="target_paste_element"></div>

Terima kasih banyak kepada Tim Down. Lihat posting ini untuk jawabannya:

Dapatkan konten yang disisipkan pada dokumen pada acara tempel

Solusi yang berfungsi bagi saya adalah menambahkan pendengar acara untuk menempelkan acara jika Anda menempelkan ke input teks. Karena peristiwa tempel terjadi sebelum teks dalam perubahan input, di dalam handler di tempel saya membuat fungsi yang ditangguhkan di dalamnya saya memeriksa perubahan di kotak input saya yang terjadi pada tempel:

onPaste: function() {
    var oThis = this;
    setTimeout(function() { // Defer until onPaste() is done
        console.log('paste', oThis.input.value);
        // Manipulate pasted input
    }, 1);
}

Ini terlalu lama untuk mengomentari jawaban Nico, yang menurut saya tidak berfungsi lagi di Firefox (per komentar), dan tidak berfungsi untuk saya di Safari seperti sebelumnya.

Pertama, sekarang Anda tampaknya dapat membaca langsung dari clipboard. Daripada kode seperti:

if (/text\/plain/.test(e.clipboardData.types)) {
    // shouldn't this be writing to elem.value for text/plain anyway?
    elem.innerHTML = e.clipboardData.getData('text/plain');
}

menggunakan:

types = e.clipboardData.types;
if (((types instanceof DOMStringList) && types.contains("text/plain")) ||
    (/text\/plain/.test(types))) {
    // shouldn't this be writing to elem.value for text/plain anyway?
    elem.innerHTML = e.clipboardData.getData('text/plain');
}

karena Firefox memiliki typesbidang yang DOMStringListtidak diimplementasikan test.

Firefox berikutnya tidak akan mengizinkan tempel kecuali fokusnya ada di contenteditable=truebidang.

Akhirnya, Firefox tidak akan mengizinkan tempel dengan andal kecuali fokusnya ada pada textarea(atau mungkin input) yang tidak hanya contenteditable=truetetapi juga:

• tidak display:none
• tidak visibility:hidden
• tidak berukuran nol

Saya mencoba untuk menyembunyikan bidang teks sehingga saya dapat membuat karya pasta melalui emulator JS VNC (yaitu akan pergi ke klien jarak jauh dan tidak ada sebenarnya textareadll untuk menempel ke). Saya menemukan mencoba menyembunyikan bidang teks di atas memberikan gejala di mana kadang-kadang bekerja, tetapi biasanya gagal pada tempel kedua (atau ketika bidang itu dihapus untuk mencegah menempelkan data yang sama dua kali) karena bidang kehilangan fokus dan tidak akan mendapatkan kembali dengan benar meskipun begitu focus(). Solusi yang saya temukan adalah menaruhnya z-order: -1000, membuatnyadisplay:none , menjadikannya sebagai 1px demi 1px, dan mengatur semua warna menjadi transparan. Yuck.

Di Safari, Anda bagian kedua dari yang di atas berlaku, yaitu Anda harus memiliki textareayang tidak display:none.

Pertama yang terlintas dalam pikiran adalah pastehandler lib penutupan google http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html

Solusi sederhana:

document.onpaste = function(e) {
    var pasted = e.clipboardData.getData('Text');
    console.log(pasted)
}

Ini bekerja untuk saya:

function onPasteMe(currentData, maxLen) {
    // validate max length of pasted text
    var totalCharacterCount = window.clipboardData.getData('Text').length;
}

<input type="text" onPaste="return onPasteMe(this, 50);" />

function myFunct( e ){
    e.preventDefault();

    var pastedText = undefined;
    if( window.clipboardData && window.clipboardData.getData ){
    pastedText = window.clipboardData.getData('Text');
} 
else if( e.clipboardData && e.clipboardData.getData ){
    pastedText = e.clipboardData.getData('text/plain');
}

//work with text

}
document.onpaste = myFunct;

Anda dapat melakukan ini dengan cara ini:

gunakan plugin jQuery ini untuk acara pra & pasca tempel:

$.fn.pasteEvents = function( delay ) {
    if (delay == undefined) delay = 20;
    return $(this).each(function() {
        var $el = $(this);
        $el.on("paste", function() {
            $el.trigger("prepaste");
            setTimeout(function() { $el.trigger("postpaste"); }, delay);
        });
    });
};

Sekarang Anda dapat menggunakan plugin ini ;:

$('#txt').on("prepaste", function() { 

    $(this).find("*").each(function(){

        var tmp=new Date.getTime();
        $(this).data("uid",tmp);
    });


}).pasteEvents();

$('#txt').on("postpaste", function() { 


  $(this).find("*").each(function(){

     if(!$(this).data("uid")){
        $(this).removeClass();
          $(this).removeAttr("style id");
      }
    });
}).pasteEvents();

Penjelasan

Pertama-tama set uid untuk semua elemen yang ada sebagai atribut data.

Kemudian bandingkan semua node POST PASTE event. Jadi dengan membandingkan Anda dapat mengidentifikasi yang baru dimasukkan karena mereka akan memiliki uid, lalu hapus atribut style / class / id dari elemen yang baru dibuat, sehingga Anda dapat mempertahankan pemformatan yang lebih lama.

$('#dom').on('paste',function (e){
    setTimeout(function(){
        console.log(e.currentTarget.value);
    },0);
});

Biarkan peramban menempel seperti biasa di div kontennya yang dapat diedit dan kemudian setelah tempel menukar elemen rentang yang digunakan untuk gaya teks khusus dengan teks itu sendiri. Ini sepertinya berfungsi baik di internet explorer dan browser lain yang saya coba ...

$('[contenteditable]').on('paste', function (e) {
    setTimeout(function () {
        $(e.target).children('span').each(function () {
            $(this).replaceWith($(this).text());
        });
    }, 0);
});

Solusi ini mengasumsikan bahwa Anda menjalankan jQuery dan bahwa Anda tidak ingin pemformatan teks di salah satu div yang dapat diedit konten Anda .

Sisi positifnya adalah sangat sederhana.

Solusi ini menggantikan tag html, sederhana dan lintas-browser; periksa jsfiddle ini: http://jsfiddle.net/tomwan/cbp1u2cx/1/ , kode inti:

var $plainText = $("#plainText");
var $linkOnly = $("#linkOnly");
var $html = $("#html");

$plainText.on('paste', function (e) {
    window.setTimeout(function () {
        $plainText.html(removeAllTags(replaceStyleAttr($plainText.html())));
    }, 0);
});

$linkOnly.on('paste', function (e) {
    window.setTimeout(function () {
        $linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html())));
    }, 0);
});

function replaceStyleAttr (str) {
    return str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g, function (a, b, c, d) {
        return b + 'style_replace' + d;
    });
}

function removeTagsExcludeA (str) {
    return str.replace(/<\/?((?!a)(\w+))\s*[\w\W]*?>/g, '');
}

function removeAllTags (str) {
    return str.replace(/<\/?(\w+)\s*[\w\W]*?>/g, '');
}

perhatikan: Anda harus melakukan beberapa pekerjaan tentang filter xss di sisi belakang karena solusi ini tidak dapat menyaring string seperti '<< >>'

Ini adalah kode yang ada diposting di atas tetapi saya telah memperbaruinya untuk IE, bugnya adalah ketika teks yang ada dipilih dan disisipkan tidak akan menghapus konten yang dipilih. Ini telah diperbaiki oleh kode di bawah ini

selRange.deleteContents(); 

Lihat kode lengkap di bawah ini

$('[contenteditable]').on('paste', function (e) {
    e.preventDefault();

    if (window.clipboardData) {
        content = window.clipboardData.getData('Text');        
        if (window.getSelection) {
            var selObj = window.getSelection();
            var selRange = selObj.getRangeAt(0);
            selRange.deleteContents();                
            selRange.insertNode(document.createTextNode(content));
        }
    } else if (e.originalEvent.clipboardData) {
        content = (e.originalEvent || e).clipboardData.getData('text/plain');
        document.execCommand('insertText', false, content);
    }        
});