path: root/public/index.php

<?php
declare(strict_types=1);

function imagickCleanAndWriteImage(string $image_data, string $local_path): bool // "string" parce que file_get_contents...
{
    $format = strtolower(pathinfo($local_path)['extension']);
    try{
        $imagick = new Imagick();
        $imagick->readImageBlob($image_data);
        $imagick->stripImage(); // nettoyage métadonnées
        //$imagick->setImageFormat($format); // inutile, writeImage force la conversion

        // compression
        switch($format){
            case 'jpeg': // particularité du switch, si 'jpeg' le test de 'jpg' est ignoré et on va jusqu'au break
            case 'jpg':
                $imagick->setImageCompression(Imagick::COMPRESSION_JPEG);
                $imagick->setImageCompressionQuality(85);
                break;
            case 'webp':
                $imagick->setImageCompression(Imagick::COMPRESSION_WEBP);
                $imagick->setImageCompressionQuality(85);
                break;
            case 'png':
                $imagick->setImageCompression(Imagick::COMPRESSION_ZIP);
                $imagick->setImageCompressionQuality(7); // 9 est sans perte
                break;
            case 'tiff':
                $imagick->setImageCompression(Imagick::COMPRESSION_LZW);  // LZW est sans perte
                break;
        }

        // enregistrement
        // writeImage utilise l'extension du fichier et ignore le format détecté
        // imagemagick est à l'origine une appli console, elle considère que l'extension montre l'intention de l'utilisateur
        $imagick->writeImage($local_path);
        $imagick->clear();
        $imagick->destroy();
        return true;
    }
    catch(Exception $e){
        return false;
    }
}

function curlDownloadImage(string $url, int $maxRetries = 3, int $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); // inutile depuis php 8.0

        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, '_');
}

function checkFileDownload(array $file): bool
{
	$extensions_white_list = ['pdf', 'rtf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'odt', 'ods', 'odp']; // = extensions_white_list côté javascript
	$mime_type_white_list = ['application/pdf', 'application/rtf', 'text/rtf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.oasis.opendocument.presentation'];
	
	// 1/ extension
	$extension = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
	if(!in_array($extension, $extensions_white_list, true)){
		return false;
    }
	
	// 2/ fichier obtenu par HTTP POST (théoriquement inutile si le routeur est solide, mais ça ne mange pas de pain)
	if(!is_uploaded_file($file['tmp_name'])){
		return false;
	}

	// 3/ objet $finfo valide (dépend du paramètre FILEINFO_MIME_TYPE)
    $finfo = new finfo(FILEINFO_MIME_TYPE);
	if($finfo === false){
        return false;
    }
	
	// 4/ contrôle du "vrai" type mime (finfo_file lit les 1ers octets des fichiers pour y trouver des "signatures", très fiable sauf avec les conteneurs: doc, zip...)
    $real_type = finfo_file($finfo, $file['tmp_name']);
    return in_array($real_type, $mime_type_white_list, true);
}

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
        $article_id = $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']) && in_array($_GET['action'], ['upload_image', 'upload_image_url', 'upload_image_base64'])){
    $dest = 'images/';
    if(!is_dir($dest)){
        mkdir($dest, 0755, true);
    }
    $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'tiff', 'tif'];

    if($_GET['action'] == 'upload_image'){
        if(!isset($_FILES['file'])){
            http_response_code(400);
            echo json_encode(['message' => 'Erreur 400: Bad Request']);
            die;
        }
        if(!is_uploaded_file($_FILES['file']['tmp_name'])) {
            http_response_code(400);
            echo json_encode(['message' => "Le fichier n'a pas été téléchargé correctement."]);
            die;
        }
        
        $name = sanitizeFileName(pathinfo($_FILES['file']['name'], PATHINFO_FILENAME));
        $extension = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION));
        $image_data = file_get_contents($_FILES['file']['tmp_name']);
    }
    elseif($_GET['action'] == 'upload_image_url'){
        $json = json_decode(file_get_contents('php://input'), true);
        if(!isset($json['image_url'])){
            http_response_code(400);
            echo json_encode(['message' => 'Erreur 400: Bad Request']);
            die;
        }

        $image_data = curlDownloadImage($json['image_url']); // téléchargement de l’image par le serveur avec cURL au lieu de file_get_contents
        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;
        }
        
        $url_path = parse_url($json['image_url'], PHP_URL_PATH);
        $name = sanitizeFileName(pathinfo($url_path, PATHINFO_FILENAME));
        $extension = strtolower(pathinfo($url_path, PATHINFO_EXTENSION));
    }
    elseif($_GET['action'] == 'upload_image_base64'){
        $json = json_decode(file_get_contents('php://input'), 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)){ // $type est déclaré et passé par référence
            http_response_code(400);
            echo json_encode(['message' => 'Données image base64 manquantes ou invalides']);
            die;
        }
        $extension = strtolower($type[1]); // dans (\w+)

        $name = 'pasted_image';        
        $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;
        }
    }

    if(!in_array($extension, $allowed_extensions)){
        $extension = 'jpeg';
    }
    $local_path = $dest . $name . '_' . uniqid() . '.' . $extension;
    if(imagickCleanAndWriteImage($image_data, $local_path)){
        echo json_encode(['location' => $local_path]);
    }
    else{
        http_response_code(500);
        echo json_encode(['message' => 'Erreur image non valide']);
    }
    die;
}
elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
    if(isset($_FILES['file'])){
        $dest = 'media/';
        if(!is_dir($dest)){ // Vérifier si le répertoire existe, sinon le créer
            mkdir($dest, 0755, true);
        }
        
        $name = sanitizeFileName(pathinfo($_FILES['file']['name'], PATHINFO_FILENAME)); // retirer caractères spéciaux et changer espaces en underscores
        $extension = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION)); 
        $file_path = $dest . $name . '_' . uniqid() . '.' . $extension; // nom unique
        
        if(checkFileDownload($_FILES['file'])){
        	if(move_uploaded_file($_FILES['file']['tmp_name'], $file_path)){
				echo json_encode(['location' => $file_path]);
			}
			else{
				http_response_code(500);
				echo json_encode(['message' => 'Erreur enregistrement du fichier.']);
			}
        }
        else{
        	http_response_code(400);
			echo json_encode(['message' => 'Erreur 400: fichier non valide.']);
		}
    }
    else{
        http_response_code(400);
        echo json_encode(['message' => 'Erreur 400: Bad Request']);
    }
    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(article_id){
            // Récupérer et sauvegarder le contenu d'origine de l'article
            const element = document.getElementById(article_id);
            if (!element) {
                return;
            }
            const articleContent = element.innerHTML;
            element.setAttribute('data-original-content', articleContent);

            tinymce.init({
                selector: `#${article_id}`,
                language: 'fr_FR',
                language_url: '../vendor/mklkj/tinymce-i18n/langs/fr_FR.js', // paquet mklkj/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,
                link_title: false, // supprime le champ compliqué "titre" (apparaît au survol du lien) dans la fenêtre "link"
                /*link_attributes_postprocess: (attrs) => { // modifier les attributs des liens créés
					console.log(attrs);
					if (attrs.rel) {
						attrs.rel += 'noreferrer'; // cacher la page d'où on vient
					}
				},*/
                setup: function (editor){
                    const extensions_white_list = ['pdf', 'rtf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'odt', 'ods', 'odp']; // = $extensions_white_list côté PHP

                    editor.on('init', function (){
                        editors[article_id] = editor;
                        
                        // Masquer le bouton "Modifier" et afficher les boutons "Annuler" et "Soumettre"
                        document.querySelector(`#edit-${article_id}`).classList.add('hidden');
                        document.querySelector(`#delete-${article_id}`).classList.add('hidden');
                        document.querySelector(`#cancel-${article_id}`).classList.remove('hidden');
                        document.querySelector(`#submit-${article_id}`).classList.remove('hidden');
                    });
                    let skipPastePreProcess = false;
                    editor.on('Paste', function (e){ // déclenchement AVANT PastePreProcess et quelque que soit le contenu collé
                        if(!e.clipboardData){ // e.clipboardData: DataTransfer
                            return;
                        }
                        const items = e.clipboardData.items; // base64
                        const files = e.clipboardData.files; // explorateur de fichiers
                        let found_file = false;

                        // données dans files
                        if(files && files.length > 0){ // noter que files peut être vide, alors que items non
                            for(let i = 0; i < files.length; i++){
                                let file = files[i];
                                
                                if(extensions_white_list.includes(file.name.split('.').pop()?.toLowerCase() || '')){
                                    found_file = true;
                                    uploadDocument(file, editor);
                                }
                                else if(file.type.indexOf('image') !== -1){ 
                                    found_file = true;
                                    uploadImageBase64(file, editor);
                                }
                            }
                        }
                        // données dans items
                        else{ // les images collées depuis l'explorateur sont aussi dans items, or elles sont déjà gérées plus haut
                            for(let i = 0; i < items.length; i++){
                                let item = items[i];

                                if(item.type.indexOf('image') !== -1){ // test type MIME contenant image
                                    found_file = true;
                                    const file = item.getAsFile(); // presse-papier => fichier lisible
                                    if(file){
                                        uploadImageBase64(file, editor);
                                    }
                                    else{
                                        console.error('fichier invalide');
                                    }
                                }
                            }
                        }

                        if(found_file){
                            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)
                        }
                    });
                    // glisser-déposer de fichiers (sauf images qui sont déjà gérées nativement)
                    editor.on('drop', function(e){
                        const data = e.dataTransfer;
                        if(!data || !data.files || data.files.length === 0){
                            return; // Laisser TinyMCE gérer (texte, images déjà supportées, etc.)
                        }
                        const files = data.files;

                        let has_documents = false;
                        for(let i = 0; i < files.length; i++){
                            if(extensions_white_list.includes(files[i].name.split('.').pop()?.toLowerCase() || '')){
                                has_documents = true;
                                break;
                            }
                        }
                        
                        if(has_documents){
                            e.preventDefault();
                            e.stopPropagation();
                            
                            for(let i = 0; i < files.length; i++){
                                let file = files[i];
                                
                                if(extensions_white_list.includes(file.name.split('.').pop()?.toLowerCase() || '')){
                                    uploadDocument(file, editor);
                                }
                                else if(file.type.indexOf('image') !== -1){
                                    uploadImageBase64(file, editor);
                                }
                            }
                        }
                        // autres cas: tinymce gère tout seul
                    });
                },
                // upload d'image avec le bouton "Insérer une image"
                images_upload_handler: images_upload_handler, // = fonction fléchée
                // upload de documents avec le bouton "insérer un lien"
                files_upload_handler: files_upload_handler, // = fonction fléchée
                documents_file_types: [ // files_upload_handler a besoin qu'on lui donne tous les types mime
                    { mimeType: 'application/pdf', extensions: [ 'pdf' ] },
                    { mimeType: 'application/rtf', extensions: [ 'rtf' ] },
                    { mimeType: 'application/msword', extensions: [ 'doc' ] },
                    { mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extensions: [ 'docx' ] },
                    { mimeType: 'application/vnd.ms-excel', extensions: [ 'xls' ] },
                    { mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extensions: [ 'xlsx' ] },
                    { mimeType: 'application/vnd.ms-powerpoint', extensions: [ 'ppt' ] },
                    { mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extensions: [ 'pptx' ] },
                    { mimeType: 'application/vnd.oasis.opendocument.text', extensions: [ 'odt' ] },
                    { mimeType: 'application/vnd.oasis.opendocument.spreadsheet', extensions: [ 'ods' ] },
                    { mimeType: 'application/vnd.oasis.opendocument.presentation', extensions: [ 'odp' ] }
                ],
                image_caption: true
            });

            // Remplacer le contenu de l'article par l'éditeur
            element.innerHTML = articleContent;
        }

        const 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");
            });
        });
        const files_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => { // utilisation = bouton "link" (OU drag & drop, et oui)
            const formData = new FormData();
            formData.append("file", blobInfo.blob());

            fetch('index.php?action=upload_file', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if(data.location){
                	console.log(blobInfo.filename());
                	console.log(data.location);
                	
                	// resolve et reject fonctionne avec Promise => type de retour standardisé et évite l'utilistion de callbacks
                    resolve({
                    	url: data.location,
                    	fileName: blobInfo.filename(),
                    });
                }
                else{
                    reject("Erreur: Chemin du fichier invalide");
                }
            })
            .catch(error => {
                reject("Erreur lors de l'upload");
            });
        });
        
        function deleteArticle(article_id) {
            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: article_id })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Supprimer l'article du DOM
                        const articleElement = document.getElementById(article_id);
                        articleElement?.parentElement?.remove();
                    }
                    else {
                        alert('Erreur lors de la suppression de l\'article.');
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                });
            }
        }
        function closeEditor(article_id){
            // Récupérer le contenu d'origine de l'article
            const element = document.getElementById(article_id);
            if(!element){
                return;
            }
            const originalContent = element.getAttribute('data-original-content');

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

            // Afficher le bouton "Modifier" et masquer les boutons "Annuler" et "Soumettre"
            document.querySelector(`#edit-${article_id}`).classList.remove('hidden');
            document.querySelector(`#delete-${article_id}`).classList.remove('hidden');
            document.querySelector(`#cancel-${article_id}`).classList.add('hidden');
            document.querySelector(`#submit-${article_id}`).classList.add('hidden');
        }
        function submitArticle(article_id) {
            // Récupérer l'éditeur correspondant à l'article
            const editor = editors[article_id];
            const element = document.getElementById(article_id);
            if(!editor || !element){
                console.error('Éditeur non trouvé pour l\'article:', article_id);
                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: article_id, content: newContent })
            })
            .then(response => response.json())
            .then(data => {
                // Fermer l'éditeur et mettre à jour le contenu de l'article
                closeEditor(article_id);
                element.innerHTML = newContent;
                //console.log(newContent);
                if(data.success){
                    // Fermer l'éditeur et mettre à jour le contenu de l'article
                    tinymce.remove(`#${article_id}`);
                    element.innerHTML = newContent;
                }
                else{
                    alert('Erreur lors de la sauvegarde de l\'article.');
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
            });
        }

        function uploadImageBase64(file, editor){
            const reader = new FileReader();

            reader.onload = function (event){ // fonction exécutée lorsque reader.readAsDataURL(file) est terminée
                const base64_target = event.target;
                if(!base64_target || !base64_target.result){
                    console.error("erreur de lecture du fichier");
                    return;
                }

                fetch('index.php?action=upload_image_base64', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ image_base64: base64_target.result })
                })
                .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
        }
        function uploadDocument(file, editor){ // utilisation = copier-coller de l'explorateur de fichiers
            const formData = new FormData();
            formData.append("file", file);
            
            fetch('index.php?action=upload_file', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if(data.location){
                    // créer le lien <a>
                    const file_name = file.name;
                    const extension = file_name.split('.').pop()?.toLowerCase() || '';
                    const target = extension === 'pdf' ? 'target="_blank"' : ''; // PDF = page
                    editor.insertContent(`<a href="${data.location}" ${target} title="${file_name}">[${extension}] ${file_name}</a>`);
                }
                else {
                    console.error("Erreur: Chemin du fichier invalide");
                }
            })
            .catch(error => {
                console.error("Erreur lors de l'upload du document :", 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>