解决方案

Question

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

根据我的阅读，自版本13以来的Firefox（我认为）不允许JavaScript访问剪贴板，并且event.clipboard不存在。我知道可以做到这一点，因为Gmail和雅虎甚至在Firefox中也是如此。

我只是希望它无论如何都可以工作，使用jQuery，JavaScript，HTML5，只要它在最新的Firefox中工作就没关系。（虽然没有Flash。）

Answer 1

我使用this question中的代码进行跨浏览器粘贴实现..它适用于我测试过的所有浏览器（向下滚动查看实际的解决方案/代码）。应该注意的是，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（即对事件附加到的元素的引用）和{{1这是事件对象。

event功能：

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

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

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

然后调用if函数

waitforpastedata功能：

这是必要的，因为粘贴的数据不会立即出现，所以如果您刚刚立即调用waitforpastedata，则无法处理任何数据。

它的作用是检查可编辑的div是否有任何内容，如果它然后调用processpaste，否则它设置一个定时器来调用自己并在20毫秒内再次检查。

processpaste功能：

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

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

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

P.S。这个代码IE＆lt; = 8和jsfiddle的组合似乎不起作用，但它在非jsfiddle环境中的ie＆lt; = 8中起作用。

从剪贴板Firefox获取粘贴图像

1 个答案:

解决方案

解释