Sztuczka JavaScript dotycząca „wklejania jako zwykły tekst” w execCommand

Mam podstawowy edytor oparty na execCommandprzedstawionym tu przykładzie. Istnieją trzy sposoby wklejenia tekstu w tym execCommandobszarze:

• Ctrl+V
• Kliknij prawym przyciskiem myszy -> Wklej
• Kliknij prawym przyciskiem myszy -> Wklej jako zwykły tekst

Chcę zezwolić na wklejanie tylko zwykłego tekstu bez żadnych znaczników HTML. Jak zmusić pierwsze dwie akcje do wklejenia zwykłego tekstu?

Możliwe rozwiązanie: przychodzi mi do głowy sposób, w jaki mogę ustawić nasłuchiwanie zdarzeń keyup dla ( Ctrl+ V) i usunąć znaczniki HTML przed wklejeniem.

1. Czy to najlepsze rozwiązanie?
2. Czy unikanie jakichkolwiek znaczników HTML w wklejaniu jest kuloodporne?
3. Jak dodać odbiornik do Kliknij prawym przyciskiem -> Wklej?

Przechwyci pastezdarzenie, anuluje pastei ręcznie wstawi tekstową reprezentację schowka:
http://jsfiddle.net/HBEzc/ . To powinno być najbardziej niezawodne:

• Wychwytuje wszystkie rodzaje wklejania ( Ctrl+ V, menu kontekstowe itp.)
• Pozwala uzyskać dane ze schowka bezpośrednio jako tekst, więc nie musisz robić brzydkich hacków, aby zastąpić HTML.

Nie jestem jednak pewien, czy obsługują różne przeglądarki.

editor.addEventListener("paste", function(e) {
    // cancel paste
    e.preventDefault();

    // get text representation of clipboard
    var text = (e.originalEvent || e).clipboardData.getData('text/plain');

    // insert text manually
    document.execCommand("insertHTML", false, text);
});

Nie mogłem uzyskać zaakceptowanej odpowiedzi tutaj, aby pracować w IE, więc trochę rozejrzałem się i doszedłem do tej odpowiedzi, która działa w IE11 i najnowszych wersjach Chrome i Firefox.

$('[contenteditable]').on('paste', function(e) {
    e.preventDefault();
    var text = '';
    if (e.clipboardData || e.originalEvent.clipboardData) {
      text = (e.originalEvent || e).clipboardData.getData('text/plain');
    } else if (window.clipboardData) {
      text = window.clipboardData.getData('Text');
    }
    if (document.queryCommandSupported('insertText')) {
      document.execCommand('insertText', false, text);
    } else {
      document.execCommand('paste', false, text);
    }
});

Bliskie rozwiązanie, takie jak pimvdb. Ale działa z FF, Chrome i IE 9:

editor.addEventListener("paste", function(e) {
    e.preventDefault();

    if (e.clipboardData) {
        content = (e.originalEvent || e).clipboardData.getData('text/plain');

        document.execCommand('insertText', false, content);
    }
    else if (window.clipboardData) {
        content = window.clipboardData.getData('Text');

        document.selection.createRange().pasteHTML(content);
    }   
});

Oczywiście na pytanie już udzielono odpowiedzi i temat bardzo stary ale chcę podać swoje rozwiązanie gdyż jest to proste czyściutkie:

To jest w moim zdarzeniu wklejania w moim contenteditable-div.

var text = '';
var that = $(this);

if (e.clipboardData)
    text = e.clipboardData.getData('text/plain');
else if (window.clipboardData)
    text = window.clipboardData.getData('Text');
else if (e.originalEvent.clipboardData)
    text = $('<div></div>').text(e.originalEvent.clipboardData.getData('text'));

if (document.queryCommandSupported('insertText')) {
    document.execCommand('insertHTML', false, $(text).html());
    return false;
}
else { // IE > 7
    that.find('*').each(function () {
         $(this).addClass('within');
    });

    setTimeout(function () {
          // nochmal alle durchlaufen
          that.find('*').each(function () {
               // wenn das element keine klasse 'within' hat, dann unwrap
               // http://api.jquery.com/unwrap/
               $(this).not('.within').contents().unwrap();
          });
    }, 1);
}

Druga część pochodzi z innego wpisu SO, którego już nie mogłem znaleźć ...

UPDATE 19.11.2014: Drugi SO-post

Żadna z opublikowanych odpowiedzi nie wydaje się działać w różnych przeglądarkach lub rozwiązanie jest zbyt skomplikowane:

• Polecenie insertTextnie jest obsługiwane przez IE
• Użycie pastepolecenia powoduje błąd przepełnienia stosu w IE11

To, co zadziałało dla mnie (IE11, Edge, Chrome i FF), to:

$("div[contenteditable=true]").off('paste').on('paste', function(e) {
    e.preventDefault();
    var text = e.originalEvent.clipboardData ? e.originalEvent.clipboardData.getData('text/plain') : window.clipboardData.getData('Text');
    _insertText(text);
});

function _insertText(text) { 
    // use insertText command if supported
    if (document.queryCommandSupported('insertText')) {
        document.execCommand('insertText', false, text);
    }
    // or insert the text content at the caret's current position
    // replacing eventually selected content
    else {
        var range = document.getSelection().getRangeAt(0);
        range.deleteContents();
        var textNode = document.createTextNode(text);
        range.insertNode(textNode);
        range.selectNodeContents(textNode);
        range.collapse(false);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<textarea name="t1"></textarea>
<div style="border: 1px solid;" contenteditable="true">Edit me!</div>
<input />
</body>

Zauważ, że niestandardowy program obsługi wklejania jest potrzebny / działa tylko dla contenteditablewęzłów. Ponieważ oba pola textareai zwykłe inputpola w ogóle nie obsługują wklejania zawartości HTML, nie trzeba tu nic robić.

Firefox nie pozwala na dostęp do danych ze schowka, więc musisz zrobić „hack”, aby to zadziałało. Nie udało mi się znaleźć kompletnego rozwiązania, jednak możesz to naprawić dla past ctrl + v, tworząc zamiast tego obszar tekstowy i wklejając do niego:

//Test if browser has the clipboard object
if (!window.Clipboard)
{
    /*Create a text area element to hold your pasted text
    Textarea is a good choice as it will make anything added to it in to plain text*/           
    var paster = document.createElement("textarea");
    //Hide the textarea
    paster.style.display = "none";              
    document.body.appendChild(paster);
    //Add a new keydown event tou your editor
    editor.addEventListener("keydown", function(e){

        function handlePaste()
        {
            //Get the text from the textarea
            var pastedText = paster.value;
            //Move the cursor back to the editor
            editor.focus();
            //Check that there is a value. FF throws an error for insertHTML with an empty string
            if (pastedText !== "") document.execCommand("insertHTML", false, pastedText);
            //Reset the textarea
            paster.value = "";
        }

        if (e.which === 86 && e.ctrlKey)
        {
            //ctrl+v => paste
            //Set the focus on your textarea
            paster.focus();
            //We need to wait a bit, otherwise FF will still try to paste in the editor => settimeout
            window.setTimeout(handlePaste, 1);
        }

    }, false);
}
else //Pretty much the answer given by pimvdb above
{
    //Add listener for paster to force paste-as-plain-text
    editor.addEventListener("paste", function(e){

        //Get the plain text from the clipboard
        var plain = (!!e.clipboardData)? e.clipboardData.getData("text/plain") : window.clipboardData.getData("Text");
            //Stop default paste action
        e.preventDefault();
        //Paste plain text
        document.execCommand("insertHTML", false, plain);

    }, false);
}

Pracowałem też nad zwykłą pastą tekstową i zacząłem nienawidzić wszystkich błędów execCommand i getData, więc postanowiłem zrobić to w klasyczny sposób i działa to jak urok:

$('#editor').bind('paste', function(){
    var before = document.getElementById('editor').innerHTML;
    setTimeout(function(){
        var after = document.getElementById('editor').innerHTML;
        var pos1 = -1;
        var pos2 = -1;
        for (var i=0; i<after.length; i++) {
            if (pos1 == -1 && before.substr(i, 1) != after.substr(i, 1)) pos1 = i;
            if (pos2 == -1 && before.substr(before.length-i-1, 1) != after.substr(after.length-i-1, 1)) pos2 = i;
        }
        var pasted = after.substr(pos1, after.length-pos2-pos1);
        var replace = pasted.replace(/<[^>]+>/g, '');
        var replaced = after.substr(0, pos1)+replace+after.substr(pos1+pasted.length);
        document.getElementById('editor').innerHTML = replaced;
    }, 100);
});

Kod z moimi notacjami można znaleźć tutaj: http://www.albertmartin.de/blog/code.php/20/plain-text-paste-with-javascript

function PasteString() {
    var editor = document.getElementById("TemplateSubPage");
    editor.focus();
  //  editor.select();
    document.execCommand('Paste');
}

function CopyString() {
    var input = document.getElementById("TemplateSubPage");
    input.focus();
   // input.select();
    document.execCommand('Copy');
    if (document.selection || document.textSelection) {
        document.selection.empty();
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
    }
}

Powyższy kod działa u mnie w IE10 i IE11, a teraz działa również w Chrome i Safari. Nie testowane w przeglądarce Firefox.

W IE11 execCommand nie działa dobrze. Używam poniższego kodu dla IE11 <div class="wmd-input" id="wmd-input-md" contenteditable=true> to moja skrzynka div.

Czytam dane ze schowka z window.clipboardData i modyfikuję tekst div's textContent i daję daszek.

Daję czas na ustawienie daszka, ponieważ jeśli nie ustawię limitu czasu, daszek przechodzi do końca div.

i powinieneś przeczytać clipboardData w IE11 w poniższy sposób. Jeśli tego nie zrobisz, znak nowej linii nie jest obsługiwany prawidłowo, więc błąd idzie źle.

var tempDiv = document.createElement("div");
tempDiv.textContent = window.clipboardData.getData("text");
var text = tempDiv.textContent;

Testowany na IE11 i Chrome. Może nie działać w IE9

document.getElementById("wmd-input-md").addEventListener("paste", function (e) {
    if (!e.clipboardData) {
        //For IE11
        e.preventDefault();
        e.stopPropagation();
        var tempDiv = document.createElement("div");
        tempDiv.textContent = window.clipboardData.getData("text");
        var text = tempDiv.textContent;
        var selection = document.getSelection();
        var start = selection.anchorOffset > selection.focusOffset ? selection.focusOffset : selection.anchorOffset;
        var end = selection.anchorOffset > selection.focusOffset ? selection.anchorOffset : selection.focusOffset;                    
        selection.removeAllRanges();

        setTimeout(function () {    
            $(".wmd-input").text($(".wmd-input").text().substring(0, start)
              + text
              + $(".wmd-input").text().substring(end));
            var range = document.createRange();
            range.setStart(document.getElementsByClassName("wmd-input")[0].firstChild, start + text.length);
            range.setEnd(document.getElementsByClassName("wmd-input")[0].firstChild, start + text.length);

            selection.addRange(range);
        }, 1);
    } else {                
        //For Chrome
        e.preventDefault();
        var text = e.clipboardData.getData("text");

        var selection = document.getSelection();
        var start = selection.anchorOffset > selection.focusOffset ? selection.focusOffset : selection.anchorOffset;
        var end = selection.anchorOffset > selection.focusOffset ? selection.anchorOffset : selection.focusOffset;

        $(this).text($(this).text().substring(0, start)
          + text
          + $(this).text().substring(end));

        var range = document.createRange();
        range.setStart($(this)[0].firstChild, start + text.length);
        range.setEnd($(this)[0].firstChild, start + text.length);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}, false);

Po długich poszukiwaniach i próbach znalazłem w jakiś sposób optymalne rozwiązanie

o czym należy pamiętać

// /\x0D/g return key ASCII
window.document.execCommand('insertHTML', false, text.replace('/\x0D/g', "\\n"))


and give the css style white-space: pre-line //for displaying

var contenteditable = document.querySelector('[contenteditable]')
            contenteditable.addEventListener('paste', function(e){
                let text = ''
                contenteditable.classList.remove('empty')                
                e.preventDefault()
                text = (e.originalEvent || e).clipboardData.getData('text/plain')
                e.clipboardData.setData('text/plain', '')                 
                window.document.execCommand('insertHTML', false, text.replace('/\x0D/g', "\\n"))// /\x0D/g return ASCII
        })

#input{
  width: 100%;
  height: 100px;
  border: 1px solid black;
  white-space: pre-line; 
}

<div id="input"contenteditable="true">
        <p>
        </p>
</div>   

OK, ponieważ wszyscy próbują obejść dane schowka, sprawdzić zdarzenie keypress i użyć execCommand.

Myślałem o tym

KOD

handlePastEvent=()=>{
    document.querySelector("#new-task-content-1").addEventListener("paste",function(e)
    {
        
        setTimeout(function(){
            document.querySelector("#new-task-content-1").innerHTML=document.querySelector("#new-task-content-1").innerText.trim();
        },1);
    });

}
handlePastEvent();

<div contenteditable="true" id="new-task-content-1">You cann't paste HTML here</div>