Astuce Javascript pour "coller en texte brut" dans execCommand

Question

J'ai un éditeur de base basé sur execCommand en suivant l'exemple présenté ici. Il y a trois façons de coller du texte dans la fenêtre execCommand zone :

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

Je veux permettre de coller uniquement du texte brut sans aucun balisage HTML. Comment puis-je forcer les deux premières actions à coller du texte brut ?

Solution possible : Le moyen auquel je pense est de définir un écouteur pour les événements de frappe pour ( Ctrl + V ) et supprimer les balises HTML avant de les coller.

1. Est-ce la meilleure solution ?
2. Est-il possible d'éviter tout balisage HTML dans le collage ?
3. Comment ajouter un écouteur au clic droit -> Coller ?

Answer 1

Après de nombreuses recherches et essais, j'ai trouvé une sorte de 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>

Answer 2

OK, comme tout le monde essaie de travailler autour des données du presse-papiers, en vérifiant l'événement de pression sur le clavier, et en utilisant 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>