HTML内容从剪贴板中的JavaScript

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，火狐）。

更新：用户希望文章内容从其他浏览器窗口粘贴，和我需要的html标签。

Answer 1

您将无法从单独使用JavaScript剪贴板，这是它的方式应该是获取数据。 TinyMCE的和CKEditor的方式当前版本做到这一点如下：

1. 使用按键事件处理
2. 在该处理程序检测CTRL-V /班-INS事件，保存在当前用户的选择，加div元素离屏（左-1000px说吧）的文件中，移动插入符是DIV中，从而有效地重定向贴
3. 设置一个非常简短的计时器（例如1毫秒）在事件处理程序调用另一个函数，它从div中检索HTML内容并执行所需的任何处理，从文档中移除div，恢复用户选择并插入处理的HTML。

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

Answer 2

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

$(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剪贴板数据。你所要做的就是让浏览器粘贴到一个可以理解的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); 
}