Загрузить вложенное изображение из буфера обмена Firefox

Я пытаюсь разрешить пользователю вставлять изображение в div. Проблема в том, что мне нужно, чтобы она работала в Firefox.

Из того, что я читал, Firefox с версии 13 (я думаю) не разрешает доступ JavaScript в буфер обмена, а event.clipboard в нем не существует. Я знаю, что это можно сделать, потому что Gmail и Yahoo в любом случае даже в Firefox.

Я просто хочу, чтобы он работал в любом случае, был с jQuery, JavaScript, HTML5, это не имеет значения, если оно работает в последнем Firefox. (Нет Flash, хотя).

Ответ 1

Я использовал код этот вопрос для моей реализации вставки в кросс-браузер. Он работает во всех браузерах, которые я тестировал (прокрутите вниз для фактического решения/кода). Следует отметить, что 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>