clipboard polyfill
v4.1.1
clipboard-polyfillclipboard-polyfill pour copier du texte ! Remarque : depuis 2020, vous pouvez utiliser navigator.clipboard.writeText(...) dans les versions stables de tous les principaux navigateurs. Cette bibliothèque ne vous sera utile que si vous souhaitez :
text/html dans Firefox ≤126,ClipboardItem dans Firefox ≤126, oujsdom ).Voir la section Compatibilité ci-dessous pour plus de détails.
Rend la copie sur le Web aussi simple que :
clipboard . writeText ( "hello world" ) ; Cette bibliothèque est un ponyfill/polyfill pour l'API de presse-papiers asynchrone moderne basée sur Promise .
Si vous utilisez npm , installez :
npm install clipboard-polyfillExemple d'application qui copie le texte dans le presse-papiers :
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 ) ;
} ) ;Remarques :
button ).async / await 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 ) ;
} ) ;Consultez la spécification de l'API Clipboard pour plus de détails.
Remarques :
async pour la syntaxe await .text/plain et text/html sont les seuls types de données pouvant être écrits dans le presse-papiers de la plupart des navigateurs.read() ne peut renvoyer qu'un sous-ensemble de types de données pris en charge, même si le presse-papiers contient davantage de types de données. Il n'existe aucun moyen de savoir s'il existe d'autres types de données.overwrite-globals Si vous souhaitez que la bibliothèque écrase l'API globale du presse-papiers avec ses implémentations, importez clipboard-polyfill/overwrite-globals . Cela transformera la bibliothèque d'un ponyfill en un polyfill approprié, afin que vous puissiez écrire du code comme si l'API du presse-papiers asynchrone était déjà implémentée dans votre navigateur :
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 ) ;
} ) ;Cette approche n'est pas recommandée, car elle peut casser tout autre code interagissant avec les paramètres globaux de l'API du presse-papiers et peut être incompatible avec les futures implémentations du navigateur.
Promise incluse Si vous avez besoin d'une version qui "fonctionne", téléchargez clipboard-polyfill.window-var.promise.es5.js et incluez-la à l'aide d'une balise <script> :
< 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 > Grâce aux commodités de l'écosystème JS moderne, nous ne proposons plus de versions arborescentes, minifiées ou CommonJS. Pour obtenir de telles versions sans perdre la compatibilité, transmettez les versions clipboard-polyfill via esbuild . Par exemple:
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 ? Les navigateurs ont implémenté plusieurs API du presse-papiers au fil du temps, et écrire dans le presse-papiers sans déclencher de bogues dans divers navigateurs anciens et actuels est assez délicat. Dans chaque navigateur prenant en charge la copie dans le presse-papiers d'une manière ou d'une autre, clipboard-polyfill tente d'agir aussi près que possible de l'API asynchrone du presse-papiers. (Voir ci-dessus pour les avertissements et limitations.)
Consultez cette présentation pour un historique plus long de l’accès au presse-papiers sur le Web.
clipboard-polyfill ajoute du support.Prise en charge de l'écriture par la première version du navigateur :
| Navigateur | writeText() | write() (HTML) | write() (autres formats) |
|---|---|---|---|
| Safari 13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list , image/png ) |
| Chrome 86ᵃ / Edge 86 | ☑️ | ☑️ | ☑️ ( image/png ) |
| Chrome 76ᵃ / Bord 79 | ☑️ | ✅ | ☑️ ( image/png ) |
| Chrome 66ᵃ / Firefox 63 | ☑️ | ✅ | |
| Safari 10 / Chrome 42ᵃ / Edgeᵈ / Firefox 41 | ✅ | ✅ᵇ | |
| Internet Explorer 9 | ✅ᶜ |
Lire l'assistance :
| Navigateur | readText() | read() (HTML) | read() (autres formats) |
|---|---|---|---|
| Safari 13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list , image/png ) |
| Chrome 76ᵃ / Edge 79 | ☑️ | ☑️ ( image/png ) | |
| Chrome 66ᵃ | ☑️ | ||
| Internet Explorer 9 | ✅ᶜ | ||
| Firefox |
window.Promise Promettez si vous souhaitez que la bibliothèque fonctionne.clipboard-polyfill signalera toujours le succès dans ce cas.ClipboardItem .text/html n'est pas écrit en utilisant le format CF_HTML attendu. clipboard-polyfill n'essaie pas de contourner ce problème, car 1) cela nécessiterait une détection de version de navigateur fragile, 2) les utilisateurs d'Edge ne sont généralement pas bloqués sur la version <17, et 3) le mode d'échec pour les autres navigateurs serait ce presse-papiers invalide Le HTML est copié. (Bogue Edge n° 14372529, n° 73) clipboard-polyfill utilise diverses heuristiques pour contourner les bogues de compatibilité. Veuillez nous faire savoir si vous rencontrez des problèmes de compatibilité avec l'un des navigateurs répertoriés ci-dessus.
| Navigateur | Première version prenant en chargenavigator.clipboard.writeText(...) | Date de sortie |
|---|---|---|
| Chrome | 66+ | avril 2018 |
| Firefox | 53+ | Octobre 2018 |
| Bord | 79+ (première version basée sur Chromium) | janvier 2020 |
| Safari | 13.1+ | mars 2020 |
Ce projet date d'une époque où l'accès au presse-papiers dans JS devenait à peine possible et où les efforts ergonomiques de l'API du presse-papiers étaient au point mort. (Voir cette présentation pour un peu plus de contexte.) Heureusement, une API ergonomique avec les mêmes fonctionnalités est désormais disponible dans tous les navigateurs modernes depuis 2020 :
document.execCommand("copy") (avec de très nombreux problèmes).clipboard.js (six mois avant que @zenorocha ne choisisse le même nom ?).crbug.com/593475 ).clipboard-polyfill pour refléter une refonte de l'API v2 alignée sur le projet de spécification.navigator.clipboard.writeText() .navigator.clipboard.write() (y compris la prise en charge text/html ).Merci à Gary Kacmarcik, Hallvord Steen et à d'autres pour avoir contribué à donner vie à l'API du presse-papiers asynchrone !
Si vous avez uniquement besoin de copier du texte dans les navigateurs modernes, envisagez d'utiliser directement navigator.clipboard.writeText() : https://caniuse.com/mdn-api_clipboard_writetext
Si vous avez également besoin de copier du texte dans des navigateurs plus anciens, vous pouvez également essayer ceci pour une solution simple et hacky.
