Có thể chỉnh sửa nội dung chỉ cho phép văn bản thuần túy

Question

Tôi đang cố gắng tạo nội dung có thể chỉnh sửa chỉ chấp nhận văn bản thuần túy.

Điều tôi muốn là lắng nghe để dán sự kiện và sau đó xóa tất cả html và dán nó trên nội dung có thể chỉnh sửa chỉ dưới dạng văn bản thuần túy.

Để làm điều đó, tôi đã thử hai cách tiếp cận khác nhau, câu trả lời dựa trên các câu hỏi tương tự, nhưng hai cách tiếp cận đó có vấn đề.

Đầu tiên: một này không được sử dụng "dán" người nghe, được thay vì lắng nghe các đầu vào (không lý tưởng cho trường hợp này), đây là một giải pháp để tránh sử dụng Clipboard API.

Vấn đề: này hoạt động tốt trên chrome nhưng không phải trên firefox và IE, khi bạn sao chép và dán html nó thành công loại bỏ html và chỉ dán văn bản, nhưng khi tiếp tục viết văn bản, caret luôn lấy vào đầu của 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); 
}); 

Bạn có thể thử nó ở đây/code trên mà tôi dựa trên:http://jsbin.com/moruseqeha/edit?html,css,js,output

Thứ hai: Kể từ khi là người đầu tiên đã thất bại và không được nghe "dán" sự kiện duy nhất, tôi sau đó đã quyết định dùng thử bằng cách sử dụng Clipboard API. Vấn đề ở đây là trên IE document.execCommand ("insertHTML", false, text); dường như không hoạt động. Hoạt động trên chrome, firefox (thử nghiệm trên v41 và v42) và cạnh.

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

Bạn có thể thử nó ở đây: http://jsfiddle.net/marinagon/461uye5p/

bất cứ ai có thể giúp tôi tìm một giải pháp cho một số vấn đề này hoặc bất cứ ai có một giải pháp tốt hơn so với những trình bày ở đây?

Tôi biết rằng tôi có thể sử dụng văn bản, nhưng tôi có lý do để không sử dụng nó.

---

Update - Giải pháp phát hiện

Tôi tìm thấy một giải pháp cho cách tiếp cận thứ hai. Kể từ document.execCommand ("insertHTML", false, text); không hoạt động trên IE Tôi đã tìm kiếm một giải pháp khác và tìm thấy số này https://stackoverflow.com/a/2925633/4631604.

Ở đây bạn có thể thấy cách tiếp cận thứ hai với giải pháp làm việc tốt trên mọi trình duyệt http://jsfiddle.net/marinagon/1v63t05q/

Answer 1

Sử dụng một yếu tố textarea thay vì một yếu tố contentEditable: _{^{(tôi nhấn mạnh)}}

Yếu tố textarea đại diện chỉnh sửa văn bản thuần túy kiểm soát cho giá trị thô của phần tử.

Ví dụ:

/* 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

bẩn hack để làm sạch các dữ liệu dán.

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