From 8cf5ac1abf9e2a6134cb82d4582aecaa99b1331a Mon Sep 17 00:00:00 2001 From: polo Date: Thu, 19 Jun 2025 18:11:20 +0200 Subject: =?UTF-8?q?upload=20image=20=C3=A9diteur:=20t=C3=A9l=C3=A9chargeme?= =?UTF-8?q?nt=20automatique=20d'images=20base64=20non=20encapsul=C3=A9es?= =?UTF-8?q?=20dans=20du=20HTML?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/tinymce.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 47 insertions(+), 3 deletions(-) (limited to 'public/js/tinymce.js') diff --git a/public/js/tinymce.js b/public/js/tinymce.js index f8d78c8..18974af 100644 --- a/public/js/tinymce.js +++ b/public/js/tinymce.js @@ -48,6 +48,51 @@ function openEditor(id, page = '') { document.querySelector(`#new-${id}`).classList.add('hidden'); // id = new-new-id_node } }); + let skipPastePreProcess = false; + editor.on('Paste', function (e){ // déclenchement AVANT PastePreProcess et quelque que soit le contenu collé + const clipboardData = (e.clipboardData || e.originalEvent.clipboardData); + if(!clipboardData){ + return; + } + const items = clipboardData.items; + let foundImage = false; + + for(let i = 0; i < items.length; i++){ + let item = items[i]; + + if(item.type.indexOf('image') !== -1){ // test type MIME contenant image + foundImage = true; + + const file = item.getAsFile(); // presse-papier => fichier lisible + const reader = new FileReader(); + + reader.onload = function (event){ // fonction exécutée lorsque reader.readAsDataURL(file) est terminée + const base64Data = event.target.result; // données de l'image + + fetch('index.php?action=upload_image_base64', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ image_base64: base64Data }) + }) + .then(response => response.json()) + .then(data => { + if(data.location){ + editor.insertContent(''); + } + }) + .catch(error => { + console.error('Erreur lors de l’upload de l’image base64 :', error); + }); + }; + reader.readAsDataURL(file); // lecture asynchrone du fichier + } + } + + if(foundImage){ + e.preventDefault(); // supprime le collage automatiue + skipPastePreProcess = true; // désactiver le PastePreProcess pour ce collage + } + }); editor.on('PastePreProcess', function (e){ // déclenchement au collage AVANT insertion dans l'éditeur const parser = new DOMParser(); const doc = parser.parseFromString(e.content, 'text/html'); @@ -58,9 +103,8 @@ function openEditor(id, page = '') { images.forEach(img => { if(img.src.startsWith('file://')){ // détection d'images non insérables console.warn('Image locale non insérable dans tinymce :', img.src); - img.outerHTML = '
' + -"Image locale non insérée (vient-elle de LibreOffice ?). Effacez cet encadré et copiez-collez l'image seule. Ensuite cliquez sur le bouton Insérer une image puis dans la nouvelle fenêtre sur Enregistrer." + -'
'; + img.outerHTML = `
+ "Image locale non insérée (vient-elle d'un document LibreOffice ?). Effacez ce message rouge et copiez-collez l'image seule.
`; } else if(img.src.startsWith('http')){ // détection d'images web const promise = fetch('index.php?action=upload_image_url', { // promesse d'un fichier téléchargeable sur le serveur -- cgit v1.2.3