我有一个基于execCommand这里介绍的示例的基本编辑器。可通过三种方式在execCommand区域内粘贴文本：
- Ctrl+V
- 右键单击 -> 粘贴
- 右键单击 -> 粘贴为纯文本
我想只允许粘贴没有任何 HTML 标记的纯文本。如何强制前两个操作粘贴纯文本？
可能的解决方案：我能想到的方法是为 ( Ctrl+ V) 的keyup 事件设置侦听器并在粘贴之前去除 HTML 标签。
- 这是最好的解决方案吗？
- 避免粘贴任何 HTML 标记是否防弹？
- 如何将侦听器添加到右键单击-> 粘贴？
在 execCommand 中“粘贴为纯文本”的 Javascript 技巧
IT技术
javascript
html
dom-events
execcommand
2021-02-09 22:41:58
6个回答
它将拦截paste事件，取消paste，并手动插入剪贴板的文本表示：
http : //jsfiddle.net/HBEzc/。这应该是最可靠的：
- 它捕获各种粘贴（Ctrl+ V，上下文菜单等）
- 它允许您直接以文本形式获取剪贴板数据，因此您不必进行丑陋的黑客攻击来替换 HTML。
不过，我不确定是否支持跨浏览器。
editor.addEventListener("paste", function(e) {
// cancel paste
e.preventDefault();
// get text representation of clipboard
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
// insert text manually
document.execCommand("insertHTML", false, text);
});
我无法在这里获得可接受的答案以在 IE 中工作，所以我进行了一些侦察并得出了这个适用于 IE11 以及最新版本的 Chrome 和 Firefox 的答案。
$('[contenteditable]').on('paste', function(e) {
e.preventDefault();
var text = '';
if (e.clipboardData || e.originalEvent.clipboardData) {
text = (e.originalEvent || e).clipboardData.getData('text/plain');
} else if (window.clipboardData) {
text = window.clipboardData.getData('Text');
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
});
作为 pimvdb 的紧密解决方案。但它适用于 FF、Chrome 和 IE 9：
editor.addEventListener("paste", function(e) {
e.preventDefault();
if (e.clipboardData) {
content = (e.originalEvent || e).clipboardData.getData('text/plain');
document.execCommand('insertText', false, content);
}
else if (window.clipboardData) {
content = window.clipboardData.getData('Text');
document.selection.createRange().pasteHTML(content);
}
});
当然，这个问题已经回答了，而且这个话题很老了，但我想提供我的解决方案，因为它很简单：
这是在我的 contenteditable-div 上的粘贴事件中。
var text = '';
var that = $(this);
if (e.clipboardData)
text = e.clipboardData.getData('text/plain');
else if (window.clipboardData)
text = window.clipboardData.getData('Text');
else if (e.originalEvent.clipboardData)
text = $('<div></div>').text(e.originalEvent.clipboardData.getData('text'));
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertHTML', false, $(text).html());
return false;
}
else { // IE > 7
that.find('*').each(function () {
$(this).addClass('within');
});
setTimeout(function () {
// nochmal alle durchlaufen
that.find('*').each(function () {
// wenn das element keine klasse 'within' hat, dann unwrap
// http://api.jquery.com/unwrap/
$(this).not('.within').contents().unwrap();
});
}, 1);
}
其他部分来自另一个我找不到的SO帖子......
2014 年 11 月 19 日更新： 另一个 SO-post
发布的答案似乎都没有真正适用于跨浏览器，或者解决方案过于复杂：
insertTextIE 不支持该命令paste在 IE11 中使用该命令导致堆栈溢出错误
对我有用的（IE11、Edge、Chrome 和 FF）如下：
$("div[contenteditable=true]").off('paste').on('paste', function(e) {
e.preventDefault();
var text = e.originalEvent.clipboardData ? e.originalEvent.clipboardData.getData('text/plain') : window.clipboardData.getData('Text');
_insertText(text);
});
function _insertText(text) {
// use insertText command if supported
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
}
// or insert the text content at the caret's current position
// replacing eventually selected content
else {
var range = document.getSelection().getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<textarea name="t1"></textarea>
<div style="border: 1px solid;" contenteditable="true">Edit me!</div>
<input />
</body>请注意，自定义粘贴处理程序只需要/为contenteditable节点工作。由于字段textarea和普通input字段根本不支持粘贴 HTML 内容，因此此处无需执行任何操作。