Contenteditable che consente solo il testo semplice

Question

Sto tentando di rendere contenteditable che accetta solo testo normale.

Quello che voglio è ascoltare l'evento incolla e quindi rimuovere tutto il codice HTML e incollarlo sul contenteditable solo come testo normale.

Per fare ciò ho già provato due diversi approcci, basato su risposte a domande simili, ma questi due approcci hanno problemi.

Primo: Questo non sta usando "incolla" ascoltatore, è invece in ascolto per l'input (non è l'ideale per questo caso), questo era una soluzione per evitare l'uso di Clipboard API.

Problema: Questo funziona bene su Chrome, ma non su Firefox e IE, quando si copia e si incolla il codice html rimuove con successo html e solo incollare il testo, ma quando continuando a scrivere il testo, il cursore viene sempre presa all'inizio del contenteditable.

function convertToPlaintext() { 
    var textContent = this.textContent; 
    this.textContent = textContent; 
} 

var contentEditableNodes = document.querySelectorAll('.plaintext[contenteditable]'); 

[].forEach.call(contentEditableNodes, function(div) { 
    div.addEventListener("input", convertToPlaintext, false); 
}); 

Si può provare qui/code su cui basandomi I:http://jsbin.com/moruseqeha/edit?html,css,js,output

Secondo: Dal momento che il primo non è riuscita e non è l'ascolto di "incollare" evento unico, io' Ho quindi deciso di provarlo utilizzando Clipboard API. Il problema qui è che su IE document.execCommand ("insertHTML", false, text); non sembra funzionare. Funziona su chrome, firefox (testato su v41 e v42) e edge.

document.querySelector(".plaintext[contenteditable]").addEventListener("paste", function(e) { 
    e.preventDefault(); 
    var text = ""; 
    if (e.clipboardData && e.clipboardData.getData) { 
    text = e.clipboardData.getData("text/plain"); 
    } else if (window.clipboardData && window.clipboardData.getData) { 
    text = window.clipboardData.getData("Text"); 
    } 
    document.execCommand("insertHTML", false, text); 
}); 

Si può provare qui: http://jsfiddle.net/marinagon/461uye5p/

Qualcuno può aiutarmi a trovare una soluzione per alcuni di questi problemi o chiunque ha una soluzione migliore di quelli presentati qui?

Sono consapevole che potrei usare textarea, ma ho motivi per non usarlo.

---

Update - soluzione trovata

ho trovato una soluzione per il secondo approccio. dal document.execCommand ("insertHTML", false, text); non funziona su IE Ho cercato altre soluzioni e ho trovato questo https://stackoverflow.com/a/2925633/4631604.

Qui potete vedere secondo approccio con la soluzione di funzionare bene in tutti i browser http://jsfiddle.net/marinagon/1v63t05q/

Answer 1

Utilizzare un elemento textarea invece di un elemento contentEditable: _{^{(sottolineatura mia)}}

L'elemento textarea rappresenta una multilinea testo in chiaro modifica controllo per il valore grezzo dell'elemento.

Esempio:

/* Auto resize height */ 
 
var textarea = document.querySelector('textarea'); 
 
(textarea.oninput = function() { 
 
    textarea.style.height = 0; 
 
    textarea.style.height = textarea.scrollHeight + 'px'; 
 
})();

textarea { width: 100%; }

<textarea>Hello! You can edit my content. But only plain-text!!!</textarea>

Answer 2

mod sporca per pulire i dati incollati.

function onpaste(e, el){ 
     setTimeout(function(){ 
      el.innerText = el.innerText; 
     }, 10); 
}