2009-01-29 14 views
71

Wie fügen wir ein Bild aus der Zwischenablage in einen benutzerdefinierten Rich-Text-Editor mit Javascript ein? (Strg + C und Strg + V oder ein Schnappschuss).Einfügen eines Bildes aus der Zwischenablage mit JavaScript

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

Bitte teilen Sie Ihre Gedanken!

Danke!

+4

AJAX ist in der Regel rücksichtsvoll Rot eine Technologie ... hat eine tatsächliche Web-Dev-Organisation ernstlich selbst AJAX benannt? Sie fragen nur nach Ärger. – Matchu

+1

Nun, in Anbetracht des Namens AJAX wurde von einem mythischen griechischen Krieger abgezockt (egal, was sie behaupten, es ist ein Akronym), was ist eine weitere Schicht des Abreißens? – GenericMeatUnit

+0

mögliches Duplikat von [Wie funktioniert das Einfügen von Bildern aus der Zwischenablage in Gmail und Google Chrome 12+?] (Http://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard- Funktionalität-Arbeit-in-Gmail-und-google-c) –

Antwort

-2

Ab vor einiger Zeit:

Ich glaube nicht, dass dies möglich ist.

Sie können möglicherweise den Dateinamen einfügen, aber Sie brauchen wirklich den vollständigen Pfad zum Bild. Sie müssen das Bild tatsächlich vom System des Benutzers auf den Server hochladen.

+0

plötzlichen Downvote ... warum? –

+0

Nicht mehr korrekt. – user66001

+0

@ user66001 fühlen sich frei zu erarbeiten –

9

Für jetzt fand ich die clipboardData Object.

Aber es nur Textformat oder URL aus der Zwischenablage abrufen. clipboardData ist nur IE, es funktioniert mit Zeichenkette 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> 

Durch Zugriff Standard Zwischenablage auf firefox, Erklärung nicht aktiviert here. Auf der anderen Seite verarbeitet execCommand() nur Textwerte und ist nicht Firefox-kompatibel.

Wie die anderen sagten, die Tatsache, dass Code auf IE funktioniert, ist ein Sicherheitsrisiko, jede Website kann auf Ihre Zwischenablage Text zugreifen.

Der einfachste Weg, Bilder relative URL zu kopieren, ist ein Java-Applet, Windows ActiveX-Plugin, .net code oder Drag & Drop verwenden.

+0

Ist es möglich, Bilder aus der Zwischenablage mit Javascript abzurufen? – kani

+0

Sie können nicht. Um ehrlich zu sein habe ich nicht mit "native Sicherheit deaktiviert" Einstellungen getestet, aber soweit ich suchte, gibt es keine Möglichkeit dafür. – belaz

+5

Sie können es in Google Mail tun, daher ist es möglich. – Dainius

-20

JavaScript Zugriff auf die Zwischenablage ist ein Sicherheitsrisiko und wenn man (fälschlicherweise) denken, Sie brauchen es Sie wahrscheinlich zurück zu Ihrem Design gehen müssen ...

+0

Ich sagte das in einer anderen Frage und wurde positiv. das ist lustig. +1 von mir – naugtur

+3

Dies trifft zwar auf die Implementierung von IE zu, aber Webkit erlaubt der Zwischenablage Zugriff nur dann, wenn der Benutzer eine Einfügeaktion einleitet. Dies ist * nützlich *, da Sie Dinge wie das Entfernen von HTML vor dem Einfügen ausführen können. –

+2

Mein Benutzer möchte eine App öffnen, Alt + Bildschirm drücken, um einen Screenshot zu erstellen, und ihn in einen Rich Text Editor in meinem Wiki einfügen (oder einen einfachen Texteditor und als Link zu dem Bild einfügen, das ich dynamisch erstellen werde) der Hintergrund). Welches Design empfehlen Sie, besser auf meine Bedürfnisse einzugehen? – DonkeyMaster

1

Leider ist es nicht möglich, ein Bild aus der Zwischenablage einfügen zu die RTE.

Wenn Sie ein Blob aus einer Desktopanwendung wie Microsoft Word kopieren, die ein Bild und Text enthält, wird das Bild als fehlerhafte Referenz angezeigt (obwohl die Proportionen korrekt sind) und der Text korrekt eingefügt wird (Formatierung) wird verloren sein).

Die einzige Sache, die möglich ist, ist ein Bild innerhalb der RTE kopieren und innerhalb der RTE einfügen.

+3

Nicht mehr korrekt. – user66001

10

Neue Browser, wie Firefox 4, unterstützen das Einfügen von Bilddaten aus der Zwischenablage in eine RTE wie Data URI with encoded PNG Data. Die meisten Webanwendungen analysieren diese Daten-URIs jedoch falsch und verwerfen sie. Yahoo E-Mail ordnungsgemäß behandelt. Google Mail und Hotmail verwerfen es jedoch. Ich habe Google und Microsoft darüber informiert.

25

Da diese Frage immer noch häufig in den Google-Suchergebnissen angezeigt wird, möchte ich darauf hinweisen, dass dies zumindest in Google Chrome heute möglich ist. Sie haben es implementiert, um in Google Mail zu verwenden, aber es ist für alle Websites verfügbar.

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

+5

Es ist jetzt in anderen Browsern möglich. Ich benutze FF17 und kann imgur.com's Paste aus der Zwischenablage verwenden – user66001

12

Dies ist jetzt auf jeden Fall möglich, in Chrome und Firefox. Ich bin nicht so sicher über IE/Safari.

Blick auf imgur.com, onpaste und pasteboard.co als Beispiele, und sehen Sie die code for pasteboard on github sowie Joel's excellent write up on his blog

Für die Aufzeichnung, müssen Sie den Benutzer Ctrl drücken + V auf dem Element, und dann Sie können die Daten in der einfügen Event-Handler durch Lesen von event.clipboardData, aber um es down-Level arbeiten, müssen Sie sicher sein, Fokus ist auf einem leeren contenteditable Element, und ziehen Sie die Ergebnisse von dort, die doesn ' t gut funktionieren in Firefox 22. Siehe here

Verwandte Themen