Element HTML5 contenteditable div akceptuje tylko zwykły tekst.

Question

Próbuję utworzyć contenteditable div, który akceptuje tylko zwykły tekst: HTML5. Używam html i jQuery poniżej:

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

Ale to nie działa na wszystkich przeglądarkach. getData nie obsługuje przeglądarki Internet Explorer. Próbowałem wiele rozwiązań tutaj wspomnieć na stackoverflow, Ale żaden nie pracował dla mnie.

Próbowałem też

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

Ale w tym przypadku document.execCommand("insertText", false, text); nie działa na IE.

Czy istnieje sposób, aby umożliwić akceptowanie danych po tagach HTML filtru, Tak aby każdy wprowadzał dane do edytowalnego elementu div według typu, wklejenia, upuszczenia lub w jakikolwiek inny sposób. Powinien wyświetlać go jako tekst.

Answer 1

Będąc niezbyt wielkim fanem jQuery, moje rozwiązanie nie wykorzysta tego. Zresztą tu idzie (powinien w każdym razie działa, jako czystego 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

Spróbuj tego:

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

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