From 47d650911124f833dd5fe94e31594bd591d6f372 Mon Sep 17 00:00:00 2001
From: polo <contact@ordipolo.fr>
Date: Tue, 10 Aug 2021 04:26:16 +0200
Subject: formulaires

---
 controller/admin.php          |  28 ++----
 controller/installation.php   |  22 +++--
 controller/visitor.php        |  13 +--
 index.php                     |   1 +
 model/Classes.php             |   2 +
 public/discographie.css       |   5 --
 view/discographie.php         |   2 -
 view/melaine.php              |   3 -
 view/template-ckeditor.php    | 185 --------------------------------------
 view/template-formulaires.php | 201 ++++++++++++++++++++++++++++++++++++++++++
 10 files changed, 230 insertions(+), 232 deletions(-)
 delete mode 100644 view/template-ckeditor.php
 create mode 100644 view/template-formulaires.php

diff --git a/controller/admin.php b/controller/admin.php
index 9c8ab7b..d738dc0 100644
--- a/controller/admin.php
+++ b/controller/admin.php
@@ -30,10 +30,7 @@ function melaineEdit($numArticle, $suppression)
 		if($suppression)
 		{
 			$Articles->delete();
-			//unset($Articles);
-			//unset($_GET['page_actuelle']);
 			header('Location: index.php?page=' . $page_actuelle);
-			//die();
 		}
 		// modification
 		else
@@ -63,12 +60,10 @@ function melaineEdit($numArticle, $suppression)
 	// création des morceaux en HTML avant assemblage
 
 	// variable $editeurHTML, on insère $texte dedans
-	require('view/template-ckeditor.php');
-	
+	require('view/template-formulaires.php');
 	// variables $css, $js, $header et $content
+	// $content contient $articles et $editeurHTML
 	require('view/melaine.php');
-	// le tableau de données ($articles) et l'éditeur ($editeurHTML) font partie de $content
-
 	// fin de l'assemblage
 	require('view/template.php');
 }
@@ -87,23 +82,10 @@ function discoEdit($numArticle, $suppression)
 	// sécurisation du contenu pré-existant inséré dans l'éditeur
 	$texte = preparationCKeditor($numArticle, $texte);
 
-	// variable $additionalInputs
-	ob_start();
-	?>
-						<p><i>Infos qui seront affichées sur cette page:</i></p>
-						<label for="titre" >Titre</label>
-						<input type="text" name="titre" required ><br />
-						<label for="annee" >Année</label>
-						<input type="text" name="annee" ><br />
-						<label for="pochette" >Pochette du disque (jpg ou png)</label>
-						<input type="file" name="pochette" >
-						<br /><br />
-	<?php
-	$additionalInputs = ob_get_clean();
-
 	// variable $editeurHTML, on insère $texte dedans
-	require('view/template-ckeditor.php');
-	// variables $css, $js et $content
+	require('view/template-formulaires.php');
+	// variables $css, $js, $header et $content
+	// $content contient ???? et $editeurHTML
 	require('view/discographie.php');
 	// fin de l'assemblage
 	require('view/template.php');
diff --git a/controller/installation.php b/controller/installation.php
index b15dce1..e7136a5 100644
--- a/controller/installation.php
+++ b/controller/installation.php
@@ -48,29 +48,27 @@ function installation()
     // - modifier soit-même les droits du dossier data (777), quoique 111 serait pas mal non plus
     // - modifier ceux du dossier parent (nom du site) avec son client FTP à la mise en ligne chez l'hébergeur et ensuite remettre tout comme avant
 
+    // le 0 devant signifie que le nombre est en octal
+    // on pourra changer cette valeur à la mise en production du site si le script d'upload des données est bon
+    $droitsDossiers = 0777;
+
     $listePages = array('melaine', 'discographie', 'concerts', 'presse', 'ateliers', 'liens', 'peinture', 'archives');
     foreach ($listePages as $page)
     {
         if(!file_exists('data/' . $page))
         {
             mkdir('data/' . $page);
-            chmod('data/' . $page, 0777);
-        }
-        // un dossier en plus dans discographie
-        if(!file_exists('data/discographie/json'))
-        {
-            mkdir('data/discographie/json');
-            chmod('data/discographie/json', 0777);
+            chmod('data/' . $page, $droitsDossiers);
         }
         if(!file_exists('data/' . $page . '/html'))
         {
             mkdir('data/' . $page . '/html');
-            chmod('data/' . $page . '/html', 0777);
+            chmod('data/' . $page . '/html', $droitsDossiers);
         }
         if(!file_exists('data/' . $page . '/images'))
         {
             mkdir('data/' . $page . '/images');
-            chmod('data/' . $page . '/images', 0777);
+            chmod('data/' . $page . '/images', $droitsDossiers);
         }
         // if(!file_exists('data/' . $page . '/multimedia'))
         // {
@@ -78,5 +76,11 @@ function installation()
         //     chmod('data/' . $page . '/multimedia', 0777);
         // }
     }
+    // dossier supplémentaire dans discographie
+    if(!file_exists('data/discographie/json'))
+    {
+        mkdir('data/discographie/json');
+        chmod('data/discographie/json', $droitsDossiers);
+    }
     // donner les droits 666 aux fichiers à l'intérieur
 }
diff --git a/controller/visitor.php b/controller/visitor.php
index 6fa0822..16f9c40 100644
--- a/controller/visitor.php
+++ b/controller/visitor.php
@@ -21,9 +21,9 @@ function menu()
 	$title = "Melaine Favennec - menu BD";
 	$page_actuelle = "menu";
 
-	// variables $css, $js et $content
+	// variables $css, $js, $header et $content
 	require('view/menu.php');
-	// HTML
+	// fin de l'assemblage
 	require('view/template.php');
 }
 
@@ -41,9 +41,12 @@ function melaineVisitor()
 
 	// vérification pour protéger les visiteurs
 	// normalement déjà faite dans submit.php, au cas où la base a été trafiquée
-	//$article = htmLawed($article);
+	foreach ($Articles as $oneArticle)
+	{
+		$oneArticle = htmLawed($oneArticle);
+	}
 
-	// variables $css, $js et $content
+	// variables $css, $js, $header et $content
 	require('view/melaine.php');
 	// HTML
 	require('view/template.php');
@@ -59,7 +62,7 @@ function discoVisitor()
 
 	// variables $css, $js et $content
 	require('view/discographie.php');
-	// HTML
+	// fin de l'assemblage
 	require('view/template.php');
 }
 
diff --git a/index.php b/index.php
index 0b6c945..cb6ea60 100644
--- a/index.php
+++ b/index.php
@@ -39,6 +39,7 @@
 // -> pour pouvoir installer le site en n'ayant qu'à modifier les droits du dossier data uniquement et éviter les situations pénibles ou l'utilisateur est bloqué sans rien comprendre, on pourra créer ou utiliser des sauvegardes au format ZIP depuis une page spéciale accessible avec le compte admin
 
 // au premier démarrage du site
+// l'explication des éventuels problèmes de droits en lecture/écriture est à chercher ici:
 require('controller/installation.php');
 installation();
 
diff --git a/model/Classes.php b/model/Classes.php
index cad1671..a455213 100644
--- a/model/Classes.php
+++ b/model/Classes.php
@@ -159,6 +159,7 @@ class AlbumsManager extends ArticlesManager
 	// fonctions CRUD
 
 	// create
+	//public function create($titre, $annee, $pochette)
     public function create($content)
     {}
 
@@ -167,6 +168,7 @@ class AlbumsManager extends ArticlesManager
 	{}
 
 	// update
+	//public function create($titre, $annee, $pochette)
 	public function update($content)
 	{}
 
diff --git a/public/discographie.css b/public/discographie.css
index 326cfbb..ff622e9 100644
--- a/public/discographie.css
+++ b/public/discographie.css
@@ -5,11 +5,6 @@
     color: #c9a068;
 }
 
-#multicolonnes
-{
-    /*display: flex;*/
-}
-
 aside
 {
     display: flex;
diff --git a/view/discographie.php b/view/discographie.php
index 45960d2..4eb8e58 100644
--- a/view/discographie.php
+++ b/view/discographie.php
@@ -43,7 +43,6 @@ $header = ob_get_clean();
 // variable $content
 ob_start();
 ?>
-				<!-- <div id="multicolonnes" > -->
 					<aside>
 						<div>
 						<p id="bouton_chronologie" >Chronologie</p>
@@ -82,6 +81,5 @@ if($_SESSION['admin'] == 1)
 }
 ?>
 	            	</section>
-	            <!-- </div> -->
 <?php
 $content = ob_get_clean();
diff --git a/view/melaine.php b/view/melaine.php
index 4b3b818..657c656 100644
--- a/view/melaine.php
+++ b/view/melaine.php
@@ -102,9 +102,6 @@ foreach ($articles as $article)
                                 Modifier cet article
                             </a>
                             &nbsp;<!-- un espace -->
-                            <!-- <button>
-                                Supprimer cet article
-                            </button> -->
                             <a href="index.php?page=melaine&action=suppression&article=<?= $j ?>" onclick="confirmerSuppression('<?= $page_actuelle ?>')" >
                                 Supprimer cet article
                             </a>
diff --git a/view/template-ckeditor.php b/view/template-ckeditor.php
deleted file mode 100644
index 8e87f1d..0000000
--- a/view/template-ckeditor.php
+++ /dev/null
@@ -1,185 +0,0 @@
-<?php
-// view/template-ckeditor.php
-
-// voici la partie HTML et javascript du ckeditor,
-// elle permette d'insérer l'éditeur dans la page avec un formulaire qui comporte 4 éléments:
-// barre d'outils, zone de saisie, formulaire caché, bouton "valider"
-
-// le formulaire est presque classique, en effet on utilise le ckeditor 5 dans sa version "Document" (ou DecoupledEditor):
-// - avantage: plus de possibilité dans la barre d'outils (se rapproche d'un traitement de texte)
-// - inconvénient: on ne peut utiliser la balise <textarea> qu'on remplace par une <div>
-
-// pour pouvoir envoyer le contenu dans le POST, on a deux possibilité:
-// - savoir coder en javascript ! et donc faire de l'AJAX, dans ce cas on n'a même plus besoin de formulaire, le contenu est envoyé au serveur au fur et à mesure! ce sera l'objet d'une future amélioration
-// - utiliser l'astuce du formulaire caché !
-
-// le javascript place les données dans le formulaire caché
-// avec la fonction envoiDonnees(), les données se retrouvent dans une <input> et sont donc envoyées avec par la POST (haha)
-
-// variable $editeurHTML
-ob_start();
-?>
-
-    <div class="conteneur_article" >
-    <form action="index.php?page=<?= $page_actuelle ?>&article=<?= $numArticle ?>&action=submit" method="post" >
-<?php
-if($page_actuelle == 'discographie')
-{
-    echo($additionalInputs . "<p><i>Infos qui seront affichées dans la page dédiée:</i></p>");
-}
-?>
-
-        <textarea id="editor" name="contenu" ></textarea>
-<?php
-// falsification de requête inter-site
-// on ajoute un formulaire caché avec une valeur aléatoire cryptée utilisable une seule fois (=jeton)
-
-// "Vous pouvez rendre chaque jeton utilisable une seule fois et ainsi éviter de rejouer plusieurs fois la même requête.
-// Les jetons sont stockés dans le back-office.
-// Une rotation des jetons est effectuée quand le nombre maximum a été atteint, les plus vieux en premier.
-// Chaque jeton peut être lié à une URL spécifique.
-// Si un jeton est intercepté, il ne peut pas être utilisé dans un autre contexte.
-// Si besoin, les jetons peuvent être attachés à une adresse IP spécifique.
-// Depuis la version v2.1, les jetons peuvent être réutilisés (par exemple pour les requêtes AJAX).
-// Si vous n’utilisez pas un framework qui gère la protection CSRF pour vous, jetez un oeil à Anti-CSRF."
-
-// une bibli qui fait ça: https://github.com/paragonie/anti-csrf
-?>
-        
-        <input class="boutonSubmitEditeur" type="submit" value="Valider" onclick="envoiDonnees();" />
-        
-        <script>
-            let editor; // variable utilisable depuis une fonction
-            
-            // code exécuté à la validation du formulaire
-            function envoiDonnees()
-            {
-                // supprimer le positionnement absolu de l'iframe
-                //~ let balisesIframe = document.getElementsByTagName("iframe");
-                //~ for(var i = 0; i < balisesIframe.length; i++)
-                //~ {
-                    //~ alert(balisesIframe[i].getAttribute("style")); // affiche le CSS
-                    //~ balisesIframe[i].removeAttribute("style");
-                    //~ alert(balisesIframe[i].getAttribute("style")); // affiche null
-                //~ }
-            }
-            
-            // ATTENTION: si l'éditeur ne fonctionne pas, empêcher qu'on puisse cliquer sur Valider!
-            // Il y a aussi des paramètres dans le fichier de config: ckeditor/webpack.config.js
-            ClassicEditor
-                .create( document.querySelector( '#editor' ),{
-                    language: 'fr',
-                    
-                    // barre d'outils à adapter au build
-                    toolbar: {
-                        items: [ 'undo', 'redo', 'selectAll', '|', 'heading', '|', 'alignment', 'bulletedList', 'numberedList', 'todoList', 'blockQuote', 'horizontalLine', '-', 'bold', 'italic', 'underline',
-                        //'strikethrough',
-                        '|',
-                        //'fontFamily',
-                        'fontColor', 'fontSize', 'highlight', '|', 'imageInsert', 'link',
-                        //'htmlEmbed',
-                        //'mediaEmbed',
-                        'insertTable'
-                        //'|', 'textPartLanguage'
-                        ],
-                        // multiligne automatique (le '-' dans la liste permet de choisir l'endroit où couper)
-                        shouldNotGroupWhenFull: true
-                        
-                        // noter que 'fontFamily' ne comporte que des polices microsoft => problèmes de droits?
-                        // de plus, il faut que le navigateur connaisse toutes les polices
-                    },
-                    
-                    // barre d'outils dans une image
-                    image: {
-                        toolbar: [
-                            'imageTextAlternative',
-                            'imageStyle:full',
-                            'imageStyle:side',
-                            'linkImage'
-                        ]
-                    },
-                    
-                    // barre d'outils dans un tableau
-                    table: {
-                        contentToolbar: [
-                            'tableColumn',
-                            'tableRow',
-                            'mergeTableCells',
-                            //'tableCellProperties',
-                            'tableProperties'
-                        ]
-                    },
-                    
-                    // plugin code HTML
-                    // pour coller le code HTML "embed" proposé par certains sites
-                    
-                    // media embarqué (audio, vidéo, carte)
-                    //mediaEmbed: {
-                        //previewsInData: true,
-                        // vaut "false" par defaut, on crée la balise non standard <oembed url="" > // https://oembed.com/
-                        // qui nécessite un traitement (en JS ou côté serveur) en utilisant le lien à l'intérieur
-                        // avec "true", on crée la balise <iframe> qui sert à insérer une page HTML dans une autre,
-                        // notre "embarquement de média" devrit donc réussir quelque soit le site
-                        // c'est plus simple, il ne reste plus qu'à ajuster le contenu avec du CSS (important)
-                        // on doit supprimer le positionnement absolu qui fait que l'iframe se place par dessus le reste et adapter la taille de l'élément
-                        
-                        // en outre, le plugin mediaEmbed (dans l'éditeur), tout comme la balise "iframe" (hors éditeur),
-                        // permettent d'afficher un aperçu (preview): une image avec un bouton lecture dessus
-                        // cette image est envoyée imédiatement par le serveur, et le contenu après un clic dessus
-                        // 
-                    //},
-                    
-                    // images
-                    // https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html
-                    // le plugin "image upload" s'occupe est la partie graphique, il crée un objet "createLoader",
-                    // le plugin "simple upload adapter" est la classe qui communique avec le serveur au moyen de requêtes AJAX
-                    // il attend du serveur une réponse au format .json contenant l'adresse où est stockée l'image:
-                    //{
-                    //  "url": "https://example.com/images/foo.jpg"
-                    //}
-                    // cette url sert à deux choses:
-                    // - à télécharger l'image avant de la placer dans l'éditeur
-                    // - écrire le HTML qu'on enregistrera ensuite
-                    // en effet, le fichier est téléchargé sur le serveur avant de revenir dans l'éditeur comme un téléchargement classique
-                    simpleUpload: {
-                        uploadUrl: 'imageAJAX.php?page=<?= $page_actuelle ?>',
-                        // noter qu'il est possible (parce que souhaitable je ne pense pas) d'envoyer une requête AJAX
-                        // en indiquant une adresse "statique" du type: fichier.txt ou .xml, jpg, png, etc
-
-                        // Headers supplémentaires envoyés avec la requête
-                        // c'est ici qu'on installe les mécanismes de sécurités comme l'authentification et la protection au CSRF
-                        headers: {
-                            'X-CSRF-TOKEN': 'CSRF-Token',
-                            Authorization: 'Bearer <JSON Web Token>'
-                        }
-                    },
-                    // formats acceptés par défaut: jpeg, png, gif, bmp, webp, tiff
-                    // le svg n'est pas dans la liste, pour raison de sécurité apparemment, il parait qu'on peut mettre du javascript à l'intérieur
-                    
-                    // ce plugin a l'intérêt de ne pas imposer l'utilisation de l'extension GD de PHP,
-                    // Reste qu'il sera quand même intéressant de l'ajouter pour le redimensionnement des images trop lourdes,
-                    // quoi que le système d'onglets (limiter l'affichge à 5 ou 10 articles par page) règle aussi le problème d'une autre manière
-                    
-                    
-                    // plugin autosave
-                } )
-                
-                .then( newEditor => {
-                    editor = newEditor;
-                    
-                // obtenir la liste des éléments disponibles pour la barre d'outils
-                //alert(Array.from( editor.ui.componentFactory.names() ));
-                // obtenir la liste des plugins disponibles:
-                //alert(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));
-                
-                var initial = '<?= $texte ?>';
-                editor.setData(initial);
-            } )
-            .catch( error => {
-                console.error( error );
-            } );
-        </script>
-    </form>
-    </div>
-<?php
-$editeurHTML = ob_get_clean();
\ No newline at end of file
diff --git a/view/template-formulaires.php b/view/template-formulaires.php
new file mode 100644
index 0000000..7eb1bb5
--- /dev/null
+++ b/view/template-formulaires.php
@@ -0,0 +1,201 @@
+<?php
+// view/template-formulaire.php
+
+// voici la partie HTML et javascript du ckeditor,
+// elle permette d'insérer l'éditeur dans la page avec un formulaire qui comporte 4 éléments:
+// barre d'outils, zone de saisie, formulaire caché, bouton "valider"
+
+// le formulaire est presque classique, en effet on utilise le ckeditor 5 dans sa version "Document" (ou DecoupledEditor):
+// - avantage: plus de possibilité dans la barre d'outils (se rapproche d'un traitement de texte)
+// - inconvénient: on ne peut utiliser la balise <textarea> qu'on remplace par une <div>
+
+// pour pouvoir envoyer le contenu dans le POST, on a deux possibilité:
+// - savoir coder en javascript ! et donc faire de l'AJAX, dans ce cas on n'a même plus besoin de formulaire, le contenu est envoyé au serveur au fur et à mesure! ce sera l'objet d'une future amélioration
+// - utiliser l'astuce du formulaire caché !
+
+// le javascript place les données dans le formulaire caché
+// avec la fonction envoiDonnees(), les données se retrouvent dans une <input> et sont donc envoyées avec par la POST (haha)
+
+
+// variable $inputsAlbum (page discographie uniquement)
+ob_start();
+?>
+        <p><i>Infos qui seront affichées sur cette page:</i></p>
+        <label for="titre" >Titre</label>
+        <input type="text" name="titre" required ><br />
+        <label for="annee" >Année</label>
+        <input type="text" name="annee" ><br />
+        <label for="pochette" >Pochette du disque (jpg ou png)</label>
+        <input type="file" name="pochette" >
+        <br /><br />
+<?php
+$inputsAlbum = ob_get_clean();
+
+
+// variable $editeurHTML
+ob_start();
+?>
+
+    <div class="conteneur_article" >
+    <form action="index.php?page=<?= $page_actuelle ?>&article=<?= $numArticle ?>&action=submit" method="post" >
+<?php
+if($page_actuelle == 'discographie')
+{
+    echo($inputsAlbum . "<p><i>Infos qui seront affichées dans la page spécifique à cet album:</i></p>");
+}
+?>
+
+        <textarea id="editor" name="contenu" ></textarea>
+<?php
+// falsification de requête inter-site
+// on ajoute un formulaire caché avec une valeur aléatoire cryptée utilisable une seule fois (=jeton)
+
+// "Vous pouvez rendre chaque jeton utilisable une seule fois et ainsi éviter de rejouer plusieurs fois la même requête.
+// Les jetons sont stockés dans le back-office.
+// Une rotation des jetons est effectuée quand le nombre maximum a été atteint, les plus vieux en premier.
+// Chaque jeton peut être lié à une URL spécifique.
+// Si un jeton est intercepté, il ne peut pas être utilisé dans un autre contexte.
+// Si besoin, les jetons peuvent être attachés à une adresse IP spécifique.
+// Depuis la version v2.1, les jetons peuvent être réutilisés (par exemple pour les requêtes AJAX).
+// Si vous n’utilisez pas un framework qui gère la protection CSRF pour vous, jetez un oeil à Anti-CSRF."
+
+// une bibli qui fait ça: https://github.com/paragonie/anti-csrf
+?>
+        
+        <input class="boutonSubmitEditeur" type="submit" value="Valider" onclick="envoiDonnees();" />
+        
+        <script>
+            let editor; // variable utilisable depuis une fonction
+            
+            // code exécuté à la validation du formulaire
+            function envoiDonnees()
+            {
+                // supprimer le positionnement absolu de l'iframe
+                //~ let balisesIframe = document.getElementsByTagName("iframe");
+                //~ for(var i = 0; i < balisesIframe.length; i++)
+                //~ {
+                    //~ alert(balisesIframe[i].getAttribute("style")); // affiche le CSS
+                    //~ balisesIframe[i].removeAttribute("style");
+                    //~ alert(balisesIframe[i].getAttribute("style")); // affiche null
+                //~ }
+            }
+            
+            // ATTENTION: si l'éditeur ne fonctionne pas, empêcher qu'on puisse cliquer sur Valider!
+            // Il y a aussi des paramètres dans le fichier de config: ckeditor/webpack.config.js
+            ClassicEditor
+                .create( document.querySelector( '#editor' ),{
+                    language: 'fr',
+                    
+                    // barre d'outils à adapter au build
+                    toolbar: {
+                        items: [ 'undo', 'redo', 'selectAll', '|', 'heading', '|', 'alignment', 'bulletedList', 'numberedList', 'todoList', 'blockQuote', 'horizontalLine', '-', 'bold', 'italic', 'underline',
+                        //'strikethrough',
+                        '|',
+                        //'fontFamily',
+                        'fontColor', 'fontSize', 'highlight', '|', 'imageInsert', 'link',
+                        //'htmlEmbed',
+                        //'mediaEmbed',
+                        'insertTable'
+                        //'|', 'textPartLanguage'
+                        ],
+                        // multiligne automatique (le '-' dans la liste permet de choisir l'endroit où couper)
+                        shouldNotGroupWhenFull: true
+                        
+                        // noter que 'fontFamily' ne comporte que des polices microsoft => problèmes de droits?
+                        // de plus, il faut que le navigateur connaisse toutes les polices
+                    },
+                    
+                    // barre d'outils dans une image
+                    image: {
+                        toolbar: [
+                            'imageTextAlternative',
+                            'imageStyle:full',
+                            'imageStyle:side',
+                            'linkImage'
+                        ]
+                    },
+                    
+                    // barre d'outils dans un tableau
+                    table: {
+                        contentToolbar: [
+                            'tableColumn',
+                            'tableRow',
+                            'mergeTableCells',
+                            //'tableCellProperties',
+                            'tableProperties'
+                        ]
+                    },
+                    
+                    // plugin code HTML
+                    // pour coller le code HTML "embed" proposé par certains sites
+                    
+                    // media embarqué (audio, vidéo, carte)
+                    //mediaEmbed: {
+                        //previewsInData: true,
+                        // vaut "false" par defaut, on crée la balise non standard <oembed url="" > // https://oembed.com/
+                        // qui nécessite un traitement (en JS ou côté serveur) en utilisant le lien à l'intérieur
+                        // avec "true", on crée la balise <iframe> qui sert à insérer une page HTML dans une autre,
+                        // notre "embarquement de média" devrit donc réussir quelque soit le site
+                        // c'est plus simple, il ne reste plus qu'à ajuster le contenu avec du CSS (important)
+                        // on doit supprimer le positionnement absolu qui fait que l'iframe se place par dessus le reste et adapter la taille de l'élément
+                        
+                        // en outre, le plugin mediaEmbed (dans l'éditeur), tout comme la balise "iframe" (hors éditeur),
+                        // permettent d'afficher un aperçu (preview): une image avec un bouton lecture dessus
+                        // cette image est envoyée imédiatement par le serveur, et le contenu après un clic dessus
+                        // 
+                    //},
+                    
+                    // images
+                    // https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html
+                    // le plugin "image upload" s'occupe est la partie graphique, il crée un objet "createLoader",
+                    // le plugin "simple upload adapter" est la classe qui communique avec le serveur au moyen de requêtes AJAX
+                    // il attend du serveur une réponse au format .json contenant l'adresse où est stockée l'image:
+                    //{
+                    //  "url": "https://example.com/images/foo.jpg"
+                    //}
+                    // cette url sert à deux choses:
+                    // - à télécharger l'image avant de la placer dans l'éditeur
+                    // - écrire le HTML qu'on enregistrera ensuite
+                    // en effet, le fichier est téléchargé sur le serveur avant de revenir dans l'éditeur comme un téléchargement classique
+                    simpleUpload: {
+                        uploadUrl: 'imageAJAX.php?page=<?= $page_actuelle ?>',
+                        // noter qu'il est possible (parce que souhaitable je ne pense pas) d'envoyer une requête AJAX
+                        // en indiquant une adresse "statique" du type: fichier.txt ou .xml, jpg, png, etc
+
+                        // Headers supplémentaires envoyés avec la requête
+                        // c'est ici qu'on installe les mécanismes de sécurités comme l'authentification et la protection au CSRF
+                        headers: {
+                            'X-CSRF-TOKEN': 'CSRF-Token',
+                            Authorization: 'Bearer <JSON Web Token>'
+                        }
+                    },
+                    // formats acceptés par défaut: jpeg, png, gif, bmp, webp, tiff
+                    // le svg n'est pas dans la liste, pour raison de sécurité apparemment, il parait qu'on peut mettre du javascript à l'intérieur
+                    
+                    // ce plugin a l'intérêt de ne pas imposer l'utilisation de l'extension GD de PHP,
+                    // Reste qu'il sera quand même intéressant de l'ajouter pour le redimensionnement des images trop lourdes,
+                    // quoi que le système d'onglets (limiter l'affichge à 5 ou 10 articles par page) règle aussi le problème d'une autre manière
+                    
+                    
+                    // plugin autosave
+                } )
+                
+                .then( newEditor => {
+                    editor = newEditor;
+                    
+                // obtenir la liste des éléments disponibles pour la barre d'outils
+                //alert(Array.from( editor.ui.componentFactory.names() ));
+                // obtenir la liste des plugins disponibles:
+                //alert(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));
+                
+                var initial = '<?= $texte ?>';
+                editor.setData(initial);
+            } )
+            .catch( error => {
+                console.error( error );
+            } );
+        </script>
+    </form>
+    </div>
+<?php
+$editeurHTML = ob_get_clean();
\ No newline at end of file
-- 
cgit v1.2.3