clipboard polyfill
v4.1.1
clipboard-polyfillclipboard-polyfill um Text zu kopieren! Hinweis: Ab 2020 können Sie navigator.clipboard.writeText(...) in den stabilen Versionen aller gängigen Browser verwenden. Diese Bibliothek wird Ihnen nur dann nützlich sein, wenn Sie:
text/html in Firefox ≤126 kopieren,ClipboardItem API in Firefox ≤126, oderjsdom ).Weitere Einzelheiten finden Sie im Abschnitt „Kompatibilität“ weiter unten.
Macht das Kopieren im Internet so einfach wie:
clipboard . writeText ( "hello world" ) ; Diese Bibliothek ist ein Ponyfill/Polyfill für die moderne Promise -basierte asynchrone Zwischenablage-API.
Wenn Sie npm verwenden, installieren Sie:
npm install clipboard-polyfillBeispiel-App, die Text in die Zwischenablage kopiert:
import * as clipboard from "clipboard-polyfill" ;
function handler ( ) {
clipboard . writeText ( "This text is plain." ) . then (
( ) => { console . log ( "success!" ) ; } ,
( ) => { console . log ( "error!" ) ; }
) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ;Hinweise:
button ).async / await -Syntax import * as clipboard from "clipboard-polyfill" ;
async function handler ( ) {
console . log ( "Previous clipboard text:" , await clipboard . readText ( ) ) ;
await clipboard . writeText ( "This text is plain." ) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ; import * as clipboard from "clipboard-polyfill" ;
async function handler ( ) {
console . log ( "Previous clipboard contents:" , await clipboard . read ( ) ) ;
const item = new clipboard . ClipboardItem ( {
"text/html" : new Blob (
[ "<i>Markup</i> <b>text</b>. Paste me into a rich text editor." ] ,
{ type : "text/html" }
) ,
"text/plain" : new Blob (
[ "Fallback markup text. Paste me into a rich text editor." ] ,
{ type : "text/plain" }
) ,
} ) ;
await clipboard . write ( [ item ] ) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ;Weitere Informationen finden Sie in der Clipboard-API-Spezifikation.
Hinweise:
async Funktionen für die await -Syntax verwenden.text/plain und text/html die einzigen Datentypen, die in den meisten Browsern in die Zwischenablage geschrieben werden können.read() möglicherweise nur eine Teilmenge der unterstützten Datentypen zurück, selbst wenn die Zwischenablage mehr Datentypen enthält. Es gibt keine Möglichkeit festzustellen, ob es weitere Datentypen gab.overwrite-globals Version Wenn Sie möchten, dass die Bibliothek die globale Clipboard-API mit ihren Implementierungen überschreibt, importieren Sie clipboard-polyfill/overwrite-globals . Dadurch wird die Bibliothek von einer Ponyfüllung in eine richtige Polyfüllung umgewandelt, sodass Sie Code schreiben können, als ob die asynchrone Zwischenablage-API bereits in Ihrem Browser implementiert wäre:
import "clipboard-polyfill/overwrite-globals" ;
async function handler ( ) {
const item = new window . ClipboardItem ( {
"text/html" : new Blob (
[ "<i>Markup</i> <b>text</b>. Paste me into a rich text editor." ] ,
{ type : "text/html" }
) ,
"text/plain" : new Blob (
[ "Fallback markup text. Paste me into a rich text editor." ] ,
{ type : "text/plain" }
) ,
} ) ;
navigator . clipboard . write ( [ item ] ) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ;Dieser Ansatz wird nicht empfohlen, da er möglicherweise anderen Code beschädigt, der mit den API-Globals der Zwischenablage interagiert, und möglicherweise nicht mit zukünftigen Browserimplementierungen kompatibel ist.
Promise enthalten Wenn Sie eine Version benötigen, die „einfach funktioniert“, laden Sie clipboard-polyfill.window-var.promise.es5.js herunter und fügen Sie sie mit einem <script> -Tag ein:
< script src =" ./clipboard-polyfill.window-var.promise.es5.js " > </ script >
< button onclick =" copy() " > Copy text! </ button >
< script >
// `clipboard` is defined on the global `window` object.
function copy ( ) {
clipboard . writeText ( "hello world!" ) ;
}
</ script > Dank der Annehmlichkeiten des modernen JS-Ökosystems bieten wir keine Tree-Shaking-, Minimierungs- oder CommonJS-Builds mehr an. Um solche Builds ohne Kompatibilitätsverlust zu erhalten, übergeben Sie clipboard-polyfill Builds über esbuild . Zum Beispiel:
mkdir temp && cd temp && npm install clipboard-polyfill esbuild
# Minify the ES6 build:
echo ' export * from "clipboard-polyfill"; ' | npx esbuild --format=esm --target=es6 --bundle --minify
# Include just the `writeText()` export and minify:
echo ' export { writeText } from "clipboard-polyfill"; ' | npx esbuild --format=esm --target=es6 --bundle --minify
# Minify an ES5 build:
cat node_modules/clipboard-polyfill/dist/es5/window-var/clipboard-polyfill.window-var.promise.es5.js | npx esbuild --format=esm --target=es5 --bundle --minify
# Get a CommonJS build:
echo ' export * from "clipboard-polyfill"; ' | npx esbuild --format=cjs --target=es6 --bundleclipboard-polyfill ? Browser haben im Laufe der Zeit mehrere Zwischenablage-APIs implementiert, und das Schreiben in die Zwischenablage, ohne Fehler auszulösen, ist in verschiedenen alten und aktuellen Browsern ziemlich schwierig. In jedem Browser, der das Kopieren in die Zwischenablage auf irgendeine Weise unterstützt, versucht clipboard-polyfill so nah wie möglich an der asynchronen Zwischenablage-API zu agieren. (Haftungsausschlüsse und Einschränkungen finden Sie oben.)
In dieser Präsentation finden Sie eine längere Geschichte des Zugriffs auf die Zwischenablage im Web.
clipboard-polyfill fügt Unterstützung hinzu.Schreibunterstützung für die früheste Browserversion:
| Browser | writeText() | write() (HTML) | write() (andere Formate) |
|---|---|---|---|
| Safari 13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list , image/png ) |
| Chrome 86 ᵃ / Edge 86 | ☑️ | ☑️ | ☑️ ( image/png ) |
| Chrom 76ᵃ / Kante 79 | ☑️ | ✅ | ☑️ ( image/png ) |
| Chrome 66ᵃ / Firefox 63 | ☑️ | ✅ | |
| Safari 10 / Chrome 42ᵃ / Edgeᵈ / Firefox 41 | ✅ | ✅ᵇ | |
| IE 9 | ✅ᶜ |
Leseunterstützung:
| Browser | readText() | read() (HTML) | read() (andere Formate) |
|---|---|---|---|
| Safari 13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list , image/png ) |
| Chrome 76 ᵃ / Edge 79 | ☑️ | ☑️ ( image/png ) | |
| Chrom 66ᵃ | ☑️ | ||
| IE 9 | ✅ᶜ | ||
| Firefox |
window.Promise polyfillen, wenn Sie möchten, dass die Bibliothek funktioniert.clipboard-polyfill meldet in diesem Fall immer einen Erfolg.ClipboardItem Konstruktor übergeben.text/html wird nicht im erwarteten CF_HTML -Format geschrieben. clipboard-polyfill versucht nicht , dies zu umgehen, da 1) es ein fragiles Browser-Versions-Sniffing erfordern würde, 2) Benutzer von Edge im Allgemeinen nicht bei Version < 17 hängen bleiben und 3) der Fehlermodus für andere Browser eine ungültige Zwischenablage wäre HTML wird kopiert. (Edge Bug #14372529, #73) clipboard-polyfill verwendet verschiedene Heuristiken, um Kompatibilitätsfehler zu umgehen. Bitte teilen Sie uns mit, wenn Sie Kompatibilitätsprobleme mit einem der oben aufgeführten Browser haben.
| Browser | Erste Version unterstütztnavigator.clipboard.writeText(...) | Veröffentlichungsdatum |
|---|---|---|
| Chrom | 66+ | April 2018 |
| Firefox | 53+ | Oktober 2018 |
| Rand | 79+ (erste Chromium-basierte Veröffentlichung) | Januar 2020 |
| Safari | 13.1+ | März 2020 |
Dieses Projekt stammt aus einer Zeit, als der Zugriff auf die Zwischenablage in JS kaum möglich war und die Bemühungen um eine ergonomische Zwischenablage-API ins Stocken gerieten. (Ein bisschen mehr Kontext finden Sie in dieser Präsentation.) Glücklicherweise ist seit 2020 eine ergonomische API mit der gleichen Funktionalität in allen modernen Browsern verfügbar:
document.execCommand("copy") (mit vielen, vielen Problemen).clipboard.js (ein halbes Jahr bevor @zenorocha denselben Namen wählte?).crbug.com/593475 ).clipboard-polyfill umbenannt, um eine v2 -API-Überarbeitung im Einklang mit dem Spezifikationsentwurf widerzuspiegeln.navigator.clipboard.writeText() .navigator.clipboard.write() (einschließlich text/html Unterstützung).Vielen Dank an Gary Kacmarcik, Hallvord Steen und andere, die dabei geholfen haben, die asynchrone Zwischenablage-API zum Leben zu erwecken!
Wenn Sie in modernen Browsern nur Text kopieren müssen, sollten Sie navigator.clipboard.writeText() direkt verwenden: https://caniuse.com/mdn-api_clipboard_writetext
Wenn Sie Text auch in älteren Browsern kopieren müssen, können Sie auch diesen Kernsatz als einfache, hackige Lösung ausprobieren.
