HTML5 contenteditable div yalnızca düz metinleri kabul eder

Question

Yalnızca düz metin kabul eden HTML5 içerik okunabilir div oluşturmaya çalışıyorum.

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

Ama tüm tarayıcılar için çalışmıyor: Aşağıda html ve jQuery kullanıyorum. getData Internet Explorer tarayıcısında desteklenmiyor. Stackoverflow'ta çok fazla çözüm denedim, ama hiçbiri benim için işe yaramadı.

Ben de

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

çalıştı Ama bu durumda document.execCommand("insertText", false, text); yılında IE için çalışmıyor.

HTML etiketlerine filtre uygulandıktan sonra verileri kabul etmenin herhangi bir yolu var mı? Böylece, herkes düzenlenebilir div içindeki verileri türüne, yapıştırmasına, bırakmasına veya başka bir şekilde girmesine izin verir. Metin olarak göstermelidir.

Answer 1

jQuery'nin büyük bir hayranı olmadığından, çözümüm hiçbir faydası olmayacaktır. Neyse işte (yine saf javascript olarak, çalışması gerekir) gider:

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

bu deneyin:

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

Referans: bu kavramı kullanan en https://w3c.github.io/editing/contentEditable.html#h-contenteditable