Astuce Javascript pour 'coller en texte brut' dans execCommand

J'ai un éditeur de base basé sur execCommandl'exemple présenté ici. Il existe trois façons de coller du texte dans la execCommandzone:

• Ctrl+V
• Clic droit -> Coller
• Clic droit -> Coller en tant que texte brut

Je souhaite autoriser le collage uniquement de texte brut sans balisage HTML. Comment puis-je forcer les deux premières actions à coller du texte brut?

Solution possible: La façon dont je peux penser est de définir l'auditeur pour les événements de keyup pour ( Ctrl+ V) et de supprimer les balises HTML avant de coller.

1. Est-ce la meilleure solution?
2. Est-il à toute épreuve d'éviter tout balisage HTML en pâte?
3. Comment ajouter un auditeur au clic droit -> Coller?

Il interceptera l' pasteévénement, annulera le pasteet insérera manuellement la représentation textuelle du presse-papiers:
http://jsfiddle.net/HBEzc/ . Cela devrait être le plus fiable:

• Il attrape toutes sortes de collages ( Ctrl+ V, menu contextuel, etc.)
• Il vous permet d'obtenir les données du presse-papiers directement sous forme de texte, vous n'avez donc pas à faire de vilains hacks pour remplacer le HTML.

Je ne suis pas sûr de la prise en charge de plusieurs navigateurs.

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

Je n'ai pas pu obtenir la réponse acceptée ici pour fonctionner dans IE, alors j'ai fait quelques recherches et suis venu à cette réponse qui fonctionne dans IE11 et les dernières versions de Chrome et 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);
    }
});

Une solution proche comme pimvdb. Mais cela fonctionne avec FF, Chrome et 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);
    }   
});

Bien sûr, la question est déjà répondue et le sujet très ancien mais je veux fournir ma solution car elle est simple et propre:

Ceci est dans mon événement de collage sur mon 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);
}

L'autre partie provient d'un autre article SO que je ne pouvais plus trouver ...

UPDATE 19.11.2014: L'autre SO-post

Aucune des réponses publiées ne semble vraiment fonctionner sur plusieurs navigateurs ou la solution est trop compliquée:

• La commande insertTextn'est pas prise en charge par IE
• L'utilisation de la pastecommande entraîne une erreur de débordement de pile dans IE11

Ce qui a fonctionné pour moi (IE11, Edge, Chrome et FF) est le suivant:

$("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>

Notez que le gestionnaire de collage personnalisé n'est nécessaire / fonctionne que pour les contenteditablenœuds. Comme les champs textareasimples et les inputchamps simples ne prennent pas du tout en charge le collage de contenu HTML, il n'y a donc rien à faire ici.

Firefox ne vous permet pas d'accéder aux données du presse-papiers, vous devrez donc faire un «hack» pour le faire fonctionner. Je n'ai pas été en mesure de trouver une solution complète, mais vous pouvez le corriger pour les pâtes ctrl + v en créant une zone de texte et en la collant à la place:

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

Je travaillais également sur un collage de texte brut et j'ai commencé à détester toutes les erreurs execCommand et getData, alors j'ai décidé de le faire de manière classique et cela fonctionne comme un charme:

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

Le code avec mes notations peut être trouvé ici: 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();
    }
}

Le code ci-dessus fonctionne pour moi dans IE10 et IE11 et fonctionne maintenant également dans Chrome et Safari. Non testé dans Firefox.

Dans IE11, execCommand ne fonctionne pas bien. J'utilise le code ci-dessous pour IE11 <div class="wmd-input" id="wmd-input-md" contenteditable=true> est ma boîte div.

J'ai lu les données du presse-papiers à partir de window.clipboardData et je modifie le textContent de div et donne le signe caret.

Je donne un timeout pour définir le caret, car si je ne règle pas le timeout, un caret va à la fin de div.

et vous devriez lire clipboardData dans IE11 de la manière ci-dessous. Si vous ne le faites pas, le caractère de nouvelle ligne n'est pas géré correctement, donc caret va mal.

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

Testé sur IE11 et chrome. Cela peut ne pas fonctionner sur 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);

Après avoir longuement cherché et essayé, j'ai trouvé en quelque sorte une solution optimale

ce qu'il est important de garder à l'esprit

// /\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 car tout le monde essaie de contourner les données du presse-papiers, de vérifier l'événement de pression de touche et d'utiliser execCommand.

J'ai pensé à ça

CODE

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>