問題: 使用contenteditable="true"
的div
元素,使用粘貼功能時會攜帶複製文本的樣式,造成樣式的錯亂。在某些瀏覽器下,粘貼從word複製過來的文本還會把word中的格式也粘貼進來,導致功能的錯誤。所以針對contenteditable
粘貼格式的問題,給出了以下的解決方案。
<div contenteditable="true"></div>
解決方案:
兼容ie11,edge,chrome,firefox,safari:
document.querySelector('div[contenteditable="true"]').addEventListener("paste", function(e) {
e.stopPropagation();
e.preventDefault();
var text = '', event = (e.originalEvent || e);
if (event.clipboardData && event.clipboardData.getData) {
text = event.clipboardData.getData('text/plain');
} else if (window.clipboardData && window.clipboardData.getData) {
text = window.clipboardData.getData('Text');
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
});