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

我实际上已经做了很多工作，只是写了一篇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剪贴板数据。您需要做的是让浏览器粘贴到一个可信的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的做法如下：

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

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

Answer 3

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

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

在javascript中从剪贴板获取html

3 个答案: