Coller une image du presse-papiers à l'aide de JavaScript
Comment coller une image du presse-papiers dans un éditeur de texte riche personnalisé en utilisant javascript? (ctrl + c et ctrl + v ou un instantané).
Quelqu'un a-t-il utilisé l'éditeur de texte enrichi d'Ajax? Le collage d'une image du presse-papiers dans Ajax RTE fonctionne-t-il?
Veuillez partager vos pensées!
Merci!
Étant donné que cette question apparaît toujours souvent dans les résultats de recherche Google, je tiens à souligner que cela est possible aujourd'hui, au moins dans Google Chrome (2011) dans tous les navigateurs modernes (2018). Ils l'ont implémenté pour l'utiliser dans GMail, mais il est disponible pour tous les sites Web.
Cela est définitivement possible maintenant dans Chrome et Firefox. Je ne suis pas sûr de IE/Safari.
Regardez imgur.com, onpaste et pasteboard.co comme exemples, et voyez le code pour pasteboard sur github ainsi que l'excellente rédaction de Joel sur son blog
Pour l'enregistrement, vous devez que l'utilisateur appuie sur Ctrl + V sur votre élément, puis vous pouvez capturer les données dans le gestionnaire d'événements coller en lisant dans event.clipboardData mais pour le faire fonctionner à un niveau inférieur, vous devez être sûr que le focus est sur un élément vide contenteditable , et tirer les résultats à partir de là, ce qui ne fonctionne pas bien dans Firefox 22. Voir ici
De nouveaux navigateurs, comme Firefox 4, prennent en charge le collage des données d'image du presse-papiers dans un RTE sous la forme RI de données avec données PNG codées . Cependant, la plupart des applications Web analysent incorrectement ces URI de données et les ignorent. Yahoo mail gère correctement. Cependant Gmail et Hotmail le rejettent. J'ai informé Google et Microsoft à ce sujet.
Pour l'instant j'ai trouvé le clipboardData Object .
Mais il ne récupère que le format de texte ou l'URL du presse-papiers. clipboardData is IE seulement, il fonctionne avec une chaîne de caractères et retourne null si nous collons une image.
un exemple de test
<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>
Par défaut, l'accès au presse-papiers n'est pas activé sur Firefox, explication ici . D'autre part, execCommand () ne traite que les valeurs de texte et n'est pas compatible avec Firefox.
Comme les autres l'ont dit, le fait que le code fonctionne sur IE est un risque pour la sécurité, n'importe quel site peut accéder au texte de votre presse-papiers.
La façon la plus simple de copier l'URL relative des images est d'utiliser un Java, plugin windows activeX, . Net code ou le glisser-déposer).
Pour aider les autres, je vais laisser le lien ici avec la réponse de 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);
}
}
}
Malheureusement, il n'est pas possible de coller une image de votre presse-papiers dans le RTE.
Si vous copiez un blob à partir d'une application de bureau comme Microsoft Word qui contient une image et du texte, l'image apparaîtra comme une référence cassée (bien que les proportions soient correctes) et le texte sera collé correctement (la mise en forme sera perdue) .
La seule chose possible est de copier une image dans le RTE et de la recoller dans le RTE.