在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访问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的做法如下:

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

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