collage contenu HTML dans l'éditeur

1 files changed, 49 insertions, 4 deletions

diff --git a/public/js/tinymce.js b/public/js/tinymce.js
index 307c384..55a37cc 100644
--- a/public/js/tinymce.js
+++ b/public/js/tinymce.js
@@ -30,7 +30,7 @@ function openEditor(id, page = '') {
         toolbar_mode: 'wrap',
         statusbar: false,
         setup: function (editor) {
-            editor.on('init', function () {
+            editor.on('init', function (){
                 editors[id] = editor;
                 
                 // boutons "Modifier", "Supprimer", "déplacer vers le haut", "déplacer vers le bas", "Annuler" et "Soumettre"
@@ -48,6 +48,53 @@ function openEditor(id, page = '') {
                     document.querySelector(`#new-${id}`).classList.add('hidden'); // id = new-new-id_node
                 }
             });
+            editor.on('PastePreProcess', function (e){ // déclenchement au collage AVANT insertion dans l'éditeur
+                let parser = new DOMParser();
+                let doc = parser.parseFromString(e.content, 'text/html');
+                let images = doc.querySelectorAll('img');
+                
+                let downloads_in_progress = [];
+                
+                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 = '<div style="border:1px solid red; padding:10px; margin:5px 0; background-color:#ffe6e6; color:#a94442; font-size:14px;">' +
+"Image locale non insérée. Pour insérer une image depuis LibreOffice, copiez l'image seule et recoller." +
+'</div>';
+                    }
+                    else if(img.src.startsWith('http')){ // détection d'images web
+                        let promise = fetch('index.php?action=upload_image_url', { // promesse d'un fichier téléchargeable sur le serveur
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ image_url: img.src })
+                        })
+                        .then(response => response.json())
+                        .then(data => {
+                            if(data.location){
+                                img.src = data.location; // remplacer l'image par celle du serveur
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Erreur lors de l’upload de l’image :', error);
+                        });
+                        
+                        downloads_in_progress.push(promise);
+                    }
+                });
+                
+                // une image web ou plus: différer l'insertion dans l'éditeur le temps que le serveur télécharge les images
+                if(downloads_in_progress.length > 0){
+                    e.preventDefault();
+
+                    Promise.all(downloads_in_progress).then(() => {
+                        e.content = doc.body.innerHTML; // remplacement du HTML dans l'éditeur par la copie modifiée (doc)
+                        editor.insertContent(e.content);
+                    });
+                }
+                else{
+                    e.content = doc.body.innerHTML; // remplacement du HTML dans l'éditeur par la copie modifiée (doc)
+                }
+            }); // fin editor.on('PastePreProcess'...
         },
         // upload d'image
         images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
@@ -86,9 +133,7 @@ function deleteArticle(id, page = '') {
         // Envoyer une requête au serveur pour supprimer l'article
         fetch('index.php?action=delete_article', {
             method: 'POST',
-            headers: {
-            'Content-Type': 'application/json'
-            },
+            headers: {'Content-Type': 'application/json'},
             body: JSON.stringify({ id: id })
         })
         .then(response => response.json())