Nội dung HTML5 có thể chỉnh sửa div chỉ chấp nhận văn bản thuần túy

Question

Tôi đang cố gắng tạo một HTML5 div có thể chỉnh sửa nội dung, chỉ chấp nhận văn bản thuần túy. Tôi đang sử dụng html và jQuery dưới đây:

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

Nhưng nó không làm việc cho tất cả các trình duyệt. getData không hỗ trợ trong trình duyệt Internet Explorer. Tôi đã thử rất nhiều giải pháp đề cập ở đây trên stackoverflow, Nhưng không ai làm việc cho tôi.

Tôi cũng đã cố gắng

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

Nhưng trong trường hợp đó document.execCommand("insertText", false, text); không được làm việc cho IE.

Có cách nào để có thể chấp nhận dữ liệu sau thẻ HTML bộ lọc, Vì vậy, bất kỳ ai nhập dữ liệu vào div có thể chỉnh sửa theo loại, dán, thả hoặc bất kỳ cách nào khác. Nó sẽ hiển thị nó dưới dạng văn bản.

Answer 1

Không phải là một fan hâm mộ lớn của jQuery, giải pháp của tôi sẽ không thực hiện bất kỳ việc sử dụng nó. Dù sao đây nó đi (nó anyway nên làm việc, như javascript tinh khiết):

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

Hãy thử điều này:

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

tham khảo: https://w3c.github.io/editing/contentEditable.html#h-contenteditable