path: root/public/index.php

<?php
function imagickCleanImage(string $image_data, string $local_path, string $format = 'jpeg'): bool // "string" parce que file_get_contents...
{
    try{
        $imagick = new Imagick();
        $imagick->readImageBlob($image_data);
        $imagick->stripImage(); // nettoyage métadonnées
        $imagick->setImageFormat($format);
        if($format === 'jpeg'){
            $imagick->setImageCompression(Imagick::COMPRESSION_JPEG);
            $imagick->setImageCompressionQuality(85); // optionnel
        }
        $imagick->writeImage($local_path); // enregistrement
        $imagick->clear();
        $imagick->destroy();
        return true;
    }
    catch(Exception $e){
        return false;
    }
}

function curlDownloadImage(string $url, $maxRetries = 3, $timeout = 10): string|false
{
    $attempt = 0;
    $imageData = false;

    while($attempt < $maxRetries){
        $ch = curl_init($url); // instance de CurlHandle
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
        curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
        curl_setopt($ch, CURLOPT_USERAGENT, 'TinyMCE-Image-Downloader');

        $imageData = curl_exec($ch);
        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        //$curlError = curl_error($ch);

        curl_close($ch);

        if($imageData !== false && $httpCode >= 200 && $httpCode < 300){
            return $imageData;
        }

        $attempt++;
        sleep(1);
    }

    return false; // échec après trois tentatives
}

function sanitizeFileName(string $filename): string {
    $filename = preg_replace('/[^a-zA-Z0-9_-]/', '_', $filename); // ne garder que les lettres, chiffres, tirets et underscores
    $filename = preg_replace('/_+/', '_', $filename); // doublons d'underscores
    return trim($filename, '_');
}

if(isset($_GET['action']) && $_GET['action'] == 'editor_submit'){
    // récupération des données
    $data = file_get_contents('php://input');
    $json = json_decode($data, true);
    
    if(json_last_error() === JSON_ERROR_NONE) {
        // Traitement côté serveur
        $articleId = $json['id'];
        $content = $json['content'];

        // retour au client
        echo json_encode(['success' => true]);
    }
    else{
        echo json_encode(['success' => false, 'message' => 'Erreur de décodage JSON']);
    }
    die;
}
elseif(isset($_GET['action']) && $_GET['action'] == 'delete_article'){
    // récupération des données
    $post = json_decode(file_get_contents('php://input'), true);
    
    if(json_last_error() === JSON_ERROR_NONE){
        // Traitement côté serveur
        $success = true;
        
        // retour au client
        if($success) {
            echo json_encode(['success' => true]);
        }
        else {
            http_response_code(500);
            echo json_encode(['success' => false, 'message' => 'Erreur lors de la suppression de l\'article.']);
        }
    }
    die;
}
elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){
    if (isset($_FILES['file'])) {
        $file = $_FILES['file'];
        $dest = 'images/';
        
        if(!is_dir($dest)) { // Vérifier si le répertoire existe, sinon le créer
            mkdir($dest, 0777, true);
        }
        
        $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'tiff', 'tif'];
        $name = sanitizeFileName(pathinfo($file['name'], PATHINFO_FILENAME));
        $extension = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
        if(!in_array($extension, $allowed_extensions) || $extension === 'jpg'){
            $extension = 'jpeg';
        }
        $file_path = $dest . $name . '_' . uniqid() . '.' . $extension;
        
        if(imagickCleanImage(file_get_contents($file['tmp_name']), $file_path, $extension)){ // recréer l’image pour la nettoyer
            echo json_encode(['location' => $file_path]); // renvoyer l'URL de l'image téléchargée
        }
        else{
            http_response_code(500);
            echo json_encode(['message' => 'Erreur image non valide']);
        }
    }
    else{
        http_response_code(400);
        echo json_encode(['message' => 'Erreur 400: Bad Request']);
    }
    die;
}
elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image_url'){
    $json = json_decode(file_get_contents('php://input'), true);
    
    if(isset($json['image_url'])){
        $image_data = curlDownloadImage($json['image_url']); // téléchargement de l’image par le serveur avec cURL au lieu de file_get_contents
        $dest = 'images/';
        
        if(!is_dir($dest)) { // Vérifier si le répertoire existe, sinon le créer
            mkdir($dest, 0777, true);
        }
        
        if($image_data === false){
            http_response_code(400);
            echo json_encode(['message' => "Erreur, le serveur n'a pas réussi à télécharger l'image."]);
            die;
        }
        
        $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'tiff', 'tif'];
        $url_path = parse_url($json['image_url'], PHP_URL_PATH);
        $name = sanitizeFileName(pathinfo($url_path, PATHINFO_FILENAME));
        $extension = strtolower(pathinfo($url_path, PATHINFO_EXTENSION));
        if(!in_array($extension, $allowed_extensions) || $extension === 'jpg'){
            $extension = 'jpeg';
        }
        $local_path = $dest . $name . '_' . uniqid() . '.' . $extension;
        
        if(imagickCleanImage($image_data, $local_path, $extension)){ // recréer l’image pour la nettoyer
            echo json_encode(['location' => $local_path]); // nouvelle adresse
        }
        else{
            http_response_code(500);
            echo json_encode(['message' => 'Erreur image non valide']);
        }
    }
    else{
        echo json_encode(['message' => 'Erreur 400: Bad Request']);
    }
    die;
}
elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image_base64'){
    $json = json_decode(file_get_contents('php://input'), true);
    $dest = 'images/';

    if(!is_dir('images')){
        mkdir('images', 0777, true);
    }

    // détection de data:image/ et de ;base64, et capture du format dans $type
    if(!isset($json['image_base64']) || !preg_match('/^data:image\/(\w+);base64,/', $json['image_base64'], $type)){
        http_response_code(400);
        echo json_encode(['message' => 'Données image base64 manquantes ou invalides']);
        die;
    }

    $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'tiff', 'tif'];
    $extension = strtolower($type[1]);
    if(!in_array($extension, $allowed_extensions) || $extension === 'jpg'){
        $extension = 'jpeg';
    }

    $image_data = base64_decode(substr($json['image_base64'], strpos($json['image_base64'], ',') + 1)); // découpe la chaine à la virgule puis convertit en binaire
    if($image_data === false){
        http_response_code(400);
        echo json_encode(['message' => 'Décodage base64 invalide']);
        die;
    }
    
    $local_path = $dest . 'pasted_image_' . uniqid() . '.' . $extension;

    if(imagickCleanImage($image_data, $local_path)){
        echo json_encode(['location' => $local_path]);
    }
    else{
        http_response_code(500);
        echo json_encode(['message' => 'Erreur image non valide']);
    }
    die;
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Éditeur d'Article</title>
    <style>
        .tox-promotion{
    		display: none;
    	}
        .hidden{
            display: none;
        }
    </style>
    <script src="../vendor/tinymce/tinymce/tinymce.min.js"></script>
    <!-- peut-être qu'on devra utiliser un lien symbolique vers ce fichier dans /public -->
    <script>
        let editors = {};

        function openEditor(articleId) {
            // Récupérer et sauvegarder le contenu d'origine de l'article
            const articleContent = document.getElementById(articleId).innerHTML;
            document.getElementById(articleId).setAttribute('data-original-content', articleContent);

            tinymce.init({
                selector: `#${articleId}`,
                language: 'fr_FR', // télécharger des paquets de langue ici: https://www.tiny.cloud/get-tiny/language-packages/
                language_url: '../vendor/tweeb/tinymce-i18n/langs/fr_FR.js', // ou installer tweeb/tinymce-i18n avec composer
                license_key: 'gpl',
                branding: false,
                plugins: 'lists link autolink table image media autoresize help',
                toolbar: 'undo redo newdocument print selectall styles bold italic underline strikethrough fontsizeinput forecolor backcolor fontfamily align numlist bullist outdent indent table link image media help',
                menubar: false,
                toolbar_mode: 'wrap',
                statusbar: false,
                //paste_data_images: true,
                setup: function (editor) {
                    editor.on('init', function () {
                        editors[articleId] = editor;
                        
                        // Masquer le bouton "Modifier" et afficher les boutons "Annuler" et "Soumettre"
                        document.querySelector(`#edit-${articleId}`).classList.add('hidden');
                        document.querySelector(`#delete-${articleId}`).classList.add('hidden');
                        document.querySelector(`#cancel-${articleId}`).classList.remove('hidden');
                        document.querySelector(`#submit-${articleId}`).classList.remove('hidden');
                    });
                    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('<img src="' + data.location + '">');
                                        }
                                    })
                                    .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 SI le contenu est du HTML
                        if(skipPastePreProcess){
                            skipPastePreProcess = false; // réinitialiser pour la prochaine fois
                            return; // ignorer ce traitement
                        }

                        const parser = new DOMParser();
                        const doc = parser.parseFromString(e.content, 'text/html');
                        const 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 (vient-elle d'un document LibreOffice ?). Effacez ce message rouge et copiez-collez l'image seule.</div>`;
                            }
                            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
                                    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 distante:', 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)
                        }
                    });
                },
                // upload d'image natif de tinymce avec le bouton "Insérer une image"
                images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
                    const formData = new FormData();
                    formData.append("file", blobInfo.blob());

                    fetch('index.php?action=upload_image', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if(data.location) {
                            resolve(data.location);
                        }
                        else {
                            reject("Erreur: Chemin d'image invalide");
                        }
                    })
                    .catch(error => {
                        reject("Erreur lors de l'upload");
                    });
                }),
                image_caption: true
            });

            // Remplacer le contenu de l'article par l'éditeur
            document.getElementById(articleId).innerHTML = articleContent;
        }
        
        function deleteArticle(articleId) {
            if (confirm('Voulez-vous vraiment supprimer cet article ?')) {
                // Envoyer une requête au serveur pour supprimer l'article
                fetch('index.php?action=delete_article', {
                    method: 'POST',
                    headers: {
                    'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ id: articleId })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Supprimer l'article du DOM
                        const articleElement = document.getElementById(articleId);
                        articleElement.parentElement.remove();
                    }
                    else {
                        alert('Erreur lors de la suppression de l\'article.');
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                });
            }
        }
        
        function closeEditor(articleId){
            // Récupérer le contenu d'origine de l'article
            const originalContent = document.getElementById(articleId).getAttribute('data-original-content');

            // Fermer l'éditeur
            tinymce.remove(`#${articleId}`);
            delete editors[articleId];
            
            // Restaurer le contenu d'origine de l'article
            document.getElementById(articleId).innerHTML = originalContent;

            // Afficher le bouton "Modifier" et masquer les boutons "Annuler" et "Soumettre"
            document.querySelector(`#edit-${articleId}`).classList.remove('hidden');
            document.querySelector(`#delete-${articleId}`).classList.remove('hidden');
            document.querySelector(`#cancel-${articleId}`).classList.add('hidden');
            document.querySelector(`#submit-${articleId}`).classList.add('hidden');
        }
        
        function submitArticle(articleId) {
            // Récupérer l'éditeur correspondant à l'article
            const editor = editors[articleId];
            if(!editor){
                console.error('Éditeur non trouvé pour l\'article:', articleId);
                return;
            }
            
            // Récupérer le contenu de l'éditeur
            const newContent = editor.getContent();

            // Envoi AJAX au serveur
            fetch('index.php?action=editor_submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ id: articleId, content: newContent })
            })
            .then(response => response.json())
            .then(data => {
            	// Fermer l'éditeur et mettre à jour le contenu de l'article
                closeEditor(articleId);
                document.getElementById(articleId).innerHTML = newContent;
                //console.log(newContent);
                if(data.success){
                    // Fermer l'éditeur et mettre à jour le contenu de l'article
                    tinymce.remove(`#${articleId}`);
                    document.getElementById(articleId).innerHTML = newContent;
                }
                else{
                    alert('Erreur lors de la sauvegarde de l\'article.');
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
            });
        }
    </script>
</head>
<body>
    <div>
        <h2>Article 1</h2>
        <div id="article-1">
            <p>Contenu de l'article 1.</p>
        </div>
        <button id="edit-article-1" onclick="openEditor('article-1')">Modifier</button>
        <button id="delete-article-1" onclick="deleteArticle('article-1')">Supprimer</button>
        <button id="cancel-article-1" class="hidden" onclick="closeEditor('article-1')">Annuler</button>
        <button id="submit-article-1" class="hidden" onclick="submitArticle('article-1')">Valider</button>
    </div>

    <div>
        <h2>Article 2</h2>
        <div id="article-2">
            <p>Contenu de l'article 2.</p>
        </div>
        <button id="edit-article-2" onclick="openEditor('article-2')">Modifier</button>
        <button id="delete-article-2" onclick="deleteArticle('article-2')">Supprimer</button>
        <button id="cancel-article-2" class="hidden" onclick="closeEditor('article-2')">Annuler</button>
        <button id="submit-article-2" class="hidden" onclick="submitArticle('article-2')">Valider</button>
    </div>
</body>
</html>