web应用程序如何检测粘贴事件并检索要粘贴的数据?
我想在文本粘贴到富文本编辑器之前删除HTML内容。
在粘贴后清理文本是有效的，但问题是所有以前的格式都会丢失。例如，我可以在编辑器中编写一个句子并将其加粗，但当我粘贴新文本时，所有格式都会丢失。我只想清除粘贴的文本，并保留以前的任何格式不变。
理想情况下，解决方案应该可以跨所有现代浏览器(例如，MSIE、Gecko、Chrome和Safari)工作。
注意，MSIE有clipboardData.getData()，但我找不到其他浏览器的类似功能。
当前回答
这是上面发布的一个现有代码，但我已经为IE更新了它，错误是当现有的文本被选择和粘贴时，不会删除所选的内容。下面的代码已经修复了这个问题
selRange.deleteContents();
参见下面的完整代码
$('[contenteditable]').on('paste', function (e) {
e.preventDefault();
if (window.clipboardData) {
content = window.clipboardData.getData('Text');
if (window.getSelection) {
var selObj = window.getSelection();
var selRange = selObj.getRangeAt(0);
selRange.deleteContents();
selRange.insertNode(document.createTextNode(content));
}
} else if (e.originalEvent.clipboardData) {
content = (e.originalEvent || e).clipboardData.getData('text/plain');
document.execCommand('insertText', false, content);
}
});
其他回答
只需让浏览器像往常一样在其内容可编辑的div中粘贴，然后在粘贴后将用于自定义文本样式的任何span元素与文本本身交换。这似乎工作得很好，在internet explorer和其他浏览器我尝试…
$('[contenteditable]').on('paste', function (e) {
setTimeout(function () {
$(e.target).children('span').each(function () {
$(this).replaceWith($(this).text());
});
}, 0);
});
这个解决方案假设您正在运行jQuery，并且您不希望在任何内容可编辑div中设置文本格式。
好处是它超级简单。
首先想到的是谷歌的闭包库的pastehandler http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html
对于清除粘贴文本和替换当前选择的文本与粘贴文本的问题是相当琐碎的:
<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div>
JS:
function handlepaste(el, e) {
document.execCommand('insertText', false, e.clipboardData.getData('text/plain'));
e.preventDefault();
}
这是上面发布的一个现有代码，但我已经为IE更新了它，错误是当现有的文本被选择和粘贴时，不会删除所选的内容。下面的代码已经修复了这个问题
selRange.deleteContents();
参见下面的完整代码
$('[contenteditable]').on('paste', function (e) {
e.preventDefault();
if (window.clipboardData) {
content = window.clipboardData.getData('Text');
if (window.getSelection) {
var selObj = window.getSelection();
var selRange = selObj.getRangeAt(0);
selRange.deleteContents();
selRange.insertNode(document.createTextNode(content));
}
} else if (e.originalEvent.clipboardData) {
content = (e.originalEvent || e).clipboardData.getData('text/plain');
document.execCommand('insertText', false, content);
}
});
写完这篇文章后，情况发生了变化:现在Firefox在版本22中添加了支持，所有主流浏览器现在都支持在粘贴事件中访问剪贴板数据。请看Nico Burns的回答。
在过去，这在跨浏览器的方式中通常是不可能的。最理想的情况是能够通过paste事件获取粘贴的内容，这在最近的浏览器中是可能的，但在一些较老的浏览器中是不可能的(特别是Firefox < 22)。
当你需要支持旧的浏览器时，你可以做的是相当复杂的和一点hack，可以在Firefox 2+， IE 5.5+和WebKit浏览器(如Safari或Chrome)中工作。TinyMCE和CKEditor的最新版本都使用了这种技术:
Detect a ctrl-v / shift-ins event using a keypress event handler In that handler, save the current user selection, add a textarea element off-screen (say at left -1000px) to the document, turn designMode off and call focus() on the textarea, thus moving the caret and effectively redirecting the paste Set a very brief timer (say 1 millisecond) in the event handler to call another function that stores the textarea value, removes the textarea from the document, turns designMode back on, restores the user selection and pastes the text in.
请注意，这将只适用于键盘粘贴事件，而不是粘贴上下文或编辑菜单。当粘贴事件触发时，将插入符号重定向到文本区域就太晚了(至少在某些浏览器中是这样)。
在不太可能的情况下，您需要支持Firefox 2，请注意您需要将文本区域放置在父文档中，而不是在该浏览器中的所见即所得编辑器iframe的文档中。
