Einfügen eines Bildes aus der Zwischenablage mit JavaScript

Question

Wie fügen wir ein Bild aus der Zwischenablage in einen benutzerdefinierten Rich-Text-Editor mit Javascript? (ctrl+c und ctrl+v oder ein Schnappschuss).

Hat jemand den Rich-Text-Editor von Ajax verwendet? Funktioniert das Einfügen eines Bildes aus der Zwischenablage in Ajax RTE?

Bitte teilen Sie uns Ihre Meinung mit!

Danke!

Answer 1

Da diese Frage immer noch häufig in den Suchergebnissen von Google auftaucht, möchte ich darauf hinweisen, dass dies auch heute noch möglich ist, zumindest in Google Chrome (2011) in allen modernen Browsern (2018). Es wurde für die Verwendung in GMail implementiert, ist aber für alle Websites verfügbar.

Wie funktioniert die Funktion zum Einfügen von Bildern aus der Zwischenablage in Google Mail und Google Chrome 12+?

Answer 2

Um anderen zu helfen, hinterlasse ich hier den Link mit der Antwort von Nick Rattalack

// window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  for (index in items) {
    var item = items[index];
    if (item.kind === 'file') {
      var blob = item.getAsFile();
      var reader = new FileReader();
      reader.onload = function(event){
        console.log(event.target.result)}; // data url!
      reader.readAsDataURL(blob);
    }
  }
}

Wie funktioniert die Funktion zum Einfügen von Bildern aus der Zwischenablage in Google Mail und Google Chrome 12+?

Answer 3

Dies ist jetzt in Chrome und Firefox definitiv möglich. Bei IE/Safari bin ich mir nicht so sicher.

Schauen Sie sich imgur.com, onpaste und pasteboard.co als Beispiele an und sehen Sie sich die Code für Pasteboard auf Github wie auch Joels ausgezeichneter Bericht in seinem Blog

Für die Aufzeichnung muss der Benutzer die Tastenkombination Strg+V auf Ihrem Element drücken, und dann können Sie die Daten in der Datei einfügen Ereignisbehandler durch Auslesen von event.clipboardData aber damit es auf der unteren Ebene funktioniert, müssen Sie sicherstellen, dass der Fokus auf einer leeren inhaltsverarbeitbar Element, und ziehen Sie die Ergebnisse von dort, was in Firefox 22 nicht gut funktioniert. Siehe aquí

Answer 4

Für den Moment habe ich die clipboardData-Objekt .

Aber es ruft nur Textformat oder URL aus der Zwischenablage ab. clipboardData ist nur für den IE, es funktioniert mit Zeichenketten und gibt null zurück, wenn wir ein Bild einfügen.

ein Testbeispiel

 <form>
    <input type="text" id="context"  onClick="paste();">  
  </form>

<script type="text/javascript"> 

function paste() {  

var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;        

}
</script>

Standardmäßig ist der Zugriff auf die Zwischenablage bei Firefox nicht aktiviert, Erklärung aquí . In die andere Richtung, execCommand() verarbeitet nur Textwerte und ist nicht Firefox-kompatibel.

Wie die anderen schon sagten, ist die Tatsache, dass der Code im IE funktioniert, ein Sicherheitsrisiko, denn jede Website kann auf Ihren Text in der Zwischenablage zugreifen.

Der einfachste Weg, Bilder mit relativer URL zu kopieren, ist die Verwendung eines Java-Applets oder eines Windows ActiveX-Plugins, .net-Code oder ziehen und ablegen.

Answer 5

Neue Browser, wie Firefox 4, unterstützen das Einfügen von Bilddaten aus der Zwischenablage in eine RTE als Daten-URI mit kodierten PNG-Daten . Die meisten Webanwendungen interpretieren diese Daten-URIs jedoch falsch und verwerfen sie. Yahoo Mail verarbeitet sie korrekt. Gmail und Hotmail hingegen verwerfen sie. Ich habe Google und Microsoft darüber informiert.