Gar*_*eys 24 html javascript formatting jquery contenteditable
我有一个contentEditable Div,我想删除任何格式,特别是复制和粘贴文本.
Isa*_*món 33
document.querySelector('div[contenteditable="true"]').addEventListener("paste", function(e) {
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
});
这很简单:为"粘贴"事件添加一个监听器并重新格式化剪贴板内容.
这是身体中所有容器的另一个例子:
[].forEach.call(document.querySelectorAll('div[contenteditable="true"]'), function (el) {
el.addEventListener('paste', function(e) {
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
}, false);
});
Saludos.
Sam*_*ton 25
你尝试过使用innerText吗？
添加:
如果要从粘贴到可编辑div中的内容中剥离标记,请尝试创建临时div的旧hack - 请参阅下面的示例.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Strip editable div markup</title>
<script type="text/javascript">
function strip(html) {
var tempDiv = document.createElement("DIV");
tempDiv.innerHTML = html;
return tempDiv.innerText;
}
</script>
</head>
<body>
<div id="editableDiv" contentEditable="true"></div>
<input type="button" value="press" onclick="alert(strip(document.getElementById('editableDiv').innerText));" />
</body>
</html>
小智 5
多年来一直在寻找答案,最终写出了自己的答案.
我希望这有助于其他人.在撰写本文时,它似乎适用于ie9,最新的chrome和firefox.
<div contenteditable="true" onpaste="OnPaste_StripFormatting(this, event);" />
<script type="text/javascript">
var _onPaste_StripFormatting_IEPaste = false;
function OnPaste_StripFormatting(elem, e) {
if (e.originalEvent && e.originalEvent.clipboardData && e.originalEvent.clipboardData.getData) {
e.preventDefault();
var text = e.originalEvent.clipboardData.getData('text/plain');
window.document.execCommand('insertText', false, text);
}
else if (e.clipboardData && e.clipboardData.getData) {
e.preventDefault();
var text = e.clipboardData.getData('text/plain');
window.document.execCommand('insertText', false, text);
}
else if (window.clipboardData && window.clipboardData.getData) {
// Stop stack overflow
if (!_onPaste_StripFormatting_IEPaste) {
_onPaste_StripFormatting_IEPaste = true;
e.preventDefault();
window.document.execCommand('ms-pasteTextOnly', false);
}
_onPaste_StripFormatting_IEPaste = false;
}
}
</script>
我知道已经有一段时间了，但我遇到了同样的问题。就我而言，它是一个 GWT 应用程序，让它变得更糟。无论如何，解决了这个问题：
var clearText = event.clipboardData.getData('text/plain');
document.execCommand('inserttext', false, clearText);
见：https : //jsfiddle.net/erikwoods/Ee3yC/
我更喜欢“inserttext”命令而不是“insertHTML”，因为文档说它正是插入纯文本，所以看起来更合适。请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
尝试 <div id="editableDiv" contentEditable="plaintext-only"></div>