Javascript 在javascript中从剪贴板获取html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2787669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get html from clipboard in javascript
提问by st78
I need to implement task which is quite common feature for RichTextEditors - take HTMLfrom clipboard. Can anyone help with guide on how to solve this task?
我需要实现任务，这是 RichTextEditors 非常常见的功能 -从剪贴板中获取HTML。任何人都可以帮助指导如何解决这个任务吗？
It has to be cross platform (IE, FF, Chrome, Opera). I just started from this code:
它必须是跨平台的（IE、FF、Chrome、Opera）。我刚从这段代码开始：
<script type="text/javascript">
$('.historyText').live('input paste', function(e) {
var paste = e.clipboardData && e.clipboardData.getData ?
e.clipboardData.getData('text/plain') : // Standard
window.clipboardData && window.clipboardData.getData ?
window.clipboardData.getData('Text') : // MS
false;
alert(paste);
});</script>
Both window.clipboardData and e.clipboardData are null (Chrome, Firefox).
window.clipboardData 和 e.clipboardData 都为 null（Chrome、Firefox）。
Update: User wants to paste article content from other browser windows, and I need to get html tags.
更新：用户想要从其他浏览器窗口粘贴文章内容，我需要获取 html 标签。
采纳答案by Tim Down
You won't be able to get data from the clipboard using JavaScript alone, which is the way it should be. The way current versions of TinyMCE and CKEditor do this is as follows:
您将无法单独使用 JavaScript 从剪贴板中获取数据，这应该是这样的。当前版本的 TinyMCE 和 CKEditor 执行此操作的方式如下：
- Detect a ctrl-v / shift-ins event using a keypress event handler
- In that handler, save the current user selection, add a div element off-screen (say at left -1000px) to the document, move the caret to be inside that div, thus effectively redirecting the paste
- Set a very brief timer (say 1 millisecond) in the event handler to call another function that retrieves the HTML content from the div and does whatever processing is required, removes the div from the document, restores the user selection and inserts the processed HTML.
- 使用按键事件处理程序检测 ctrl-v / shift-ins 事件
- 在该处理程序中，保存当前用户选择，向文档添加屏幕外的 div 元素（比如在左侧 -1000px），将插入符号移动到该 div 内，从而有效地重定向粘贴
- 在事件处理程序中设置一个非常短的计时器（比如 1 毫秒）以调用另一个函数，该函数从 div 中检索 HTML 内容并执行所需的任何处理，从文档中删除 div，恢复用户选择并插入处理过的 HTML。
Note that this will only work for keyboard paste events and not pastes from the context or edit menus. By the time the paste event fires, it's too late to redirect the caret into the div (in some browsers, at least).
请注意，这仅适用于键盘粘贴事件，而不适用于上下文或编辑菜单中的粘贴。当粘贴事件触发时，将插入符号重定向到 div（至少在某些浏览器中）为时已晚。
回答by Richard Shurtz
I actually have done a lot of work on this, and just wrote a nice blog postdescribing how we did it in detail at Lucidchart (as a disclaimer, I work at Lucidchart). We have a JSFiddlethat shows copying and pasting (tested in Firefox, Safari, Chrome, and IE9+).
我实际上在这方面做了很多工作，刚刚写了一篇很好的博客文章，描述了我们在 Lucidchart 中是如何做的（作为免责声明，我在 Lucidchart 工作）。我们有一个显示复制和粘贴的 JSFiddle（在 Firefox、Safari、Chrome 和 IE9+ 中测试）。
The short of the answer is that you will need to get the HTML during the system paste event. In most (non-IE) browsers, this can be done with something as simple as the following:
简短的回答是您需要在系统粘贴事件期间获取 HTML。在大多数（非 IE）浏览器中，这可以通过以下简单的操作来完成：
document.addEventListener('paste', function(e) {
var html = e.clipboardData.getData('text/html');
// Whatever you want to do with the html
}
The problem is when you want to get HTML in IE. For whatever reason, IE doesn't make the text/html clipboard data accessible via javascript. What you have to do is let the browser paste to a contenteditable div and then get the html after the paste event is over.
问题是当您想在 IE 中获取 HTML 时。无论出于何种原因，IE 都无法通过 javascript 访问文本/html 剪贴板数据。你要做的就是让浏览器粘贴到一个 contenteditable div，然后在 paste 事件结束后获取 html。
<div id="ie-clipboard-contenteditable" class="hidden" contenteditable="true"></div>
var ieClipboardDiv = $('#ie-clipboard-contenteditable');
var focusIeClipboardDiv = function() {
ieClipboardDiv.focus();
var range = document.createRange();
range.selectNodeContents((ieClipboardDiv.get(0)));
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
};
document.addEventListener('beforepaste', function() {
if (hiddenInput.is(':focus')) {
focusIeClipboardDiv();
}
}, true);
document.addEventListener('paste', function(e) {
ieClipboardDiv.empty();
setTimeout(function() {
var html = ieClipboardDiv.html();
// Do whatever you want with the html
ieClipboardDiv.empty();
// Return focus here
}, 0);
}
回答by jabbett
In Chrome, I access clipboardData through the event using this code:
在 Chrome 中，我使用以下代码通过事件访问 clipboardData：
$(document).bind('paste', function(e) {
var clipboardData = e.originalEvent.clipboardData;
});
