用javascript从剪贴板获取html

Question

我需要实现 RichTextEditors 非常常见的任务 - 从剪贴板中获取 HTML。 任何人都可以提供有关如何解决此任务的指南吗？

它必须是跨平台的（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>

window.clipboardData 和 e.clipboardData 均为空（Chrome、Firefox）。

更新：用户想从其他浏览器窗口粘贴文章内容，我需要获取html标签。

Answer 1

您将无法单独使用 JavaScript 从剪贴板中获取数据，这应该是这种方式。当前版本的 TinyMCE 和 CKEditor 执行此操作的方式如下：

1. 使用按键事件处理程序检测 ctrl-v / shift-ins 事件
2. 在该处理程序中，保存当前用户选择，向文档添加屏幕外的 div 元素（例如左侧 -1000 像素），将插入符号移动到该 div 内，从而有效地重定向粘贴
3. 在事件处理程序中设置一个非常简短的计时器（例如 1 毫秒）以调用另一个函数，该函数从 div 检索 HTML 内容并执行所需的任何处理，从文档中删除 div，恢复用户选择并插入已处理的 HTML。

请注意，这仅适用于键盘粘贴事件，不适用于从上下文或编辑菜单粘贴。当 paste 事件触发时，将插入符号重定向到 div 为时已晚（至少在某些浏览器中）。

Answer 2

在 Chrome 中，我使用以下代码通过事件访问剪贴板数据：

$(document).bind('paste', function(e) {
    var clipboardData = e.originalEvent.clipboardData;
});

Answer 3

实际上，我在这方面做了很多工作，刚刚写了一个nice blog post，详细描述了我们在 Lucidchart 是如何做到的（作为免责声明，我在 Lucidchart 工作）。我们有 a JSFiddle 显示复制和粘贴（在 Firefox、Safari、Chrome 和 IE9+ 中测试）。

简短的回答是您需要在系统粘贴事件期间获取 HTML。在大多数（非 IE）浏览器中，这可以通过以下简单的方式完成：

document.addEventListener('paste', function(e) {
  var html = e.clipboardData.getData('text/html');
  // Whatever you want to do with the html
}

问题是当你想在 IE 中获取 HTML 时。无论出于何种原因，IE 都无法通过 javascript 访问 text/html 剪贴板数据。你要做的就是让浏览器粘贴到一个 contenteditable 的 div 中，然后在粘贴事件结束后获取 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);
}