在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 均为 null（Chrome、Firefox）。

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

Answer 1

我实际上已经在这方面做了很多工作，刚刚写了一个 不错的博客文章描述了我们如何在 Lucidchart 详细地做到这一点（作为免责声明，我在 Lucidchart 工作）。我们有 一个 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 访问文本/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);
}

Answer 2

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

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

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

Answer 3

在 Chrome 中，我使用以下代码通过事件访问 ClipboardData：

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

Answer 4

这段代码为我完成了这项工作。

setTimeout(() => {
  navigator.clipboard.read()
    .then(text => {
        for (const item of text) {
            console.log('content type:', item.types);
            const blob = item.getType(item.types[0]).then(
                blob => {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        console.log('result:\n', event.target.result);
                    };
                    reader.readAsText(blob);
                },
                err => {
                    console.error('Failed to read clipboard content: ', err);
                }
            );
        }
    })
    .catch(err => {
      console.error('Failed to read clipboard contents: ', err);
    });
}, 3000);

有两件事要记住。

• 此代码在浏览器控制台中
• 运行在控制台中运行代码后，我们必须单击浏览器窗口中的某个位置以获得焦点或按 Tab 键。 参考