18

我正在尝试允许用户将图像粘贴到div. 问题是我需要它在 Firefox 中工作。

从我读过的内容来看，自 13 版以来的 Firefox（我认为）不允许 JavaScript 访问剪贴板，并且event.clipboard不存在其中。我知道它可以做到，因为即使在 Firefox 中，Gmail 和 Yahoo 也支持它。

我只是希望它以任何可能的方式工作，与 jQuery、JavaScript、HTML5 一起工作，只要它在最新的 Firefox 中工作就没有关系。（虽然没有 Flash）。

4

1 回答 1

14

我将此问题中的代码用于我的跨浏览器粘贴实现。它适用于我测试过的所有浏览器（向下滚动查看实际的解决方案/代码）。需要注意event.clipboardData的是，粘贴事件执行完成后立即过期。

我继续四次检查这在 Firefox 版本 19 中是否有效（我没有 13 个可用，但听起来这个问题是关于新版本中功能的退化）。

以下是答案，引自Nico Burns：

解决方案

在 IE6+、FF 3.5+、Opera、Chrome、Safari 的最新版本中测试。

function handlepaste (elem, e) {
  var savedcontent = elem.innerHTML;
  if (e && e.clipboardData && e.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
    if (/text\/html/.test(e.clipboardData.types)) {
      elem.innerHTML = e.clipboardData.getData('text/html');
    }
    else if (/text\/plain/.test(e.clipboardData.types)) {
      elem.innerHTML = e.clipboardData.getData('text/plain');
    }
    else {
      elem.innerHTML = "";
    }
    waitforpastedata(elem, savedcontent);
    if (e.preventDefault) {
      e.stopPropagation();
      e.preventDefault();
    }
    return false;
  }
  else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
    elem.innerHTML = "";
    waitforpastedata(elem, savedcontent);
    return true;
  }
}

function waitforpastedata (elem, savedcontent) {
  if (elem.childNodes && elem.childNodes.length > 0) {
    processpaste(elem, savedcontent);
  }
  else {
    that = {
      e: elem,
      s: savedcontent
    }
    that.callself = function () {
      waitforpastedata(that.e, that.s)
    }
    setTimeout(that.callself,20);
  }
}

function processpaste (elem, savedcontent) {
  pasteddata = elem.innerHTML;
  //^^Alternatively loop through dom (elem.childNodes or elem.getElementsByTagName) here

  elem.innerHTML = savedcontent;

  // Do whatever with gathered data;
  alert(pasteddata);
}
<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div>

解释

该onpaste事件具有handlepaste附加到它的函数，并传递了两个参数：（this即对事件附加到的元素的引用）以及event哪个是事件对象。

handlepaste功能：

第一行只是将可编辑 div 的内容保存到一个变量中，以便在最后可以再次恢复它。

检查浏览器if是否是 webkit 浏览器（chrome 或 safari），如果是，则将可编辑 div 的内容设置为正在粘贴的数据。然后它会取消该事件以防止 webkit 粘贴任何内容两次。这是因为 webkit 很笨拙，如果你只是清除 div 就不会粘贴任何东西。

如果它不是 webkit 浏览器，那么它只会清除可编辑的 div。

然后调用waitforpastedata函数

waitforpastedata功能：

这是必要的，因为粘贴的数据不会立即出现，所以如果您只是直接调用processpaste，那么它将没有任何数据要处理。

它所做的是检查可编辑的 div 是否有任何内容，如果有则调用processpaste，否则它会设置一个计时器来调用自身并在 20 毫秒内再次检查。

processpaste功能：

此函数将可编辑 div 的 innerHTML（现在是粘贴的数据）保存到变量中，将可编辑 div 的 innerHTML 恢复为其原始值，并警告粘贴的数据。显然，在实际使用场景中，您可能想要的不仅仅是警报数据，您可以从这里做任何您喜欢的事情。

您可能还希望通过某种数据清理过程运行粘贴的数据。这可以在它仍然在可编辑的 div 中时完成，也可以在提取的字符串上完成。

在实际情况中，您可能希望先保存选择，然后再将其恢复（在 contentEditable <div> 上设置光标位置）。然后，您可以将粘贴的数据插入到用户启动粘贴操作时光标所在的位置。

PS 这段代码 IE <= 8 和jsfiddle的组合似乎不起作用，但在非 jsfiddle 环境中 ie <= 8 确实有效。

于 2013-03-08T22:50:37.683 回答