Il div HTML contenteditable accetta solo testo in chiaro

Question

Sto provando a creare un div contenteditable HTML5, che accetta solo un testo normale. Sto utilizzando jQuery html e di seguito:

HTML

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

jQuery

(function() { 
    $('[contenteditable]').on('paste', function (e) { 
    e.preventDefault(); 
    var text = null; 
    text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste Your Text Here'); 
    document.execCommand("insertText", false, text); 
    }); 
}); 

Ma non funziona per tutti i browser. getData non supportato nel browser Internet Explorer. Ho provato molte soluzioni menzionate qui su StackOverflow, ma nessuno ha funzionato per me.

Ho anche provato

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

    if (window.clipboardData && clipboardData.setData) { 
     text = window.clipboardData.getData('text'); 
    } else { 
     text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste Your Text Here'); 
    } 
    document.execCommand("insertText", false, text); 
    }); 
}); 

Ma in questo caso document.execCommand("insertText", false, text); non funziona per IE.

C'è un modo per rendere possibile accettare i dati dopo aver filtrato i tag HTML, in modo che chiunque immetta i dati in div modificabili per tipo, incolla, rilascia o in qualsiasi altro modo. Dovrebbe essere visualizzato come testo.

Answer 1

Non essendo un grande fan di jQuery, la mia soluzione non ne farà alcun uso. In ogni caso qui va (dovrebbe comunque funzionare, come pura javascript):

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

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

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

Answer 2

Prova questa:

<div contenteditable="plaintext-only"></div> 

Riferimento: https://w3c.github.io/editing/contentEditable.html#h-contenteditable