From 83619ac611490e8cd652a0252349704100fc5148 Mon Sep 17 00:00:00 2001 From: polo Date: Wed, 18 Jun 2025 15:10:21 +0200 Subject: =?UTF-8?q?collage=20contenu=20HTML=20dans=20l'=C3=A9diteur?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/tinymce.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 49 insertions(+), 4 deletions(-) (limited to 'public') 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 = '
' + +"Image locale non insérée. Pour insérer une image depuis LibreOffice, copiez l'image seule et recoller." + +'
'; + } + 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()) -- cgit v1.2.3