From 5b455dbf1474a3c7c839cd129fd470f1fdae6b0c Mon Sep 17 00:00:00 2001
From: polo <ordipolo@gmx.fr>
Date: Sun, 27 Oct 2024 13:34:13 +0100
Subject: =?UTF-8?q?v2=20avec=20NPM=20et=20composer,=20customizable=20et=20?=
 =?UTF-8?q?plus=20facile=20=C3=A0=20int=C3=A9grer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config.php                                |  19 ++++
 data/page/html/article.html               |   1 +
 data/page/images/chirurgien jaune.jpg     | Bin 0 -> 137915 bytes
 index.php                                 |  50 +++++++++
 installation dans une application PHP.txt |  95 +++++++++++++++++
 lib/ckeditor5/article_hors_editeur.css    |  38 +++++++
 lib/ckeditor5/clean_html.php              |  46 ++++++++
 lib/ckeditor5/create.php                  |  16 +++
 lib/ckeditor5/image_upload.php            |  64 +++++++++++
 lib/ckeditor5/view.php                    | 171 ++++++++++++++++++++++++++++++
 src/templates/page.php                    |  15 +++
 11 files changed, 515 insertions(+)
 create mode 100644 config.php
 create mode 100644 data/page/html/article.html
 create mode 100644 data/page/images/chirurgien jaune.jpg
 create mode 100644 index.php
 create mode 100644 installation dans une application PHP.txt
 create mode 100644 lib/ckeditor5/article_hors_editeur.css
 create mode 100644 lib/ckeditor5/clean_html.php
 create mode 100644 lib/ckeditor5/create.php
 create mode 100644 lib/ckeditor5/image_upload.php
 create mode 100644 lib/ckeditor5/view.php
 create mode 100644 src/templates/page.php

diff --git a/config.php b/config.php
new file mode 100644
index 0000000..9cd5ff2
--- /dev/null
+++ b/config.php
@@ -0,0 +1,19 @@
+<?php
+// config.php
+
+$server_root = $_SERVER['SERVER_NAME'] . '/ckeditor5-new/';
+// pour l'importmap: j'ai modifié la version "installation avec CDN de la doc pour utiliser les fichiers locaux
+// l'"importmap" permet d'utiliser "import" (ça ressemble pas mal au python) dans le navigateur comme n'importe quel langage de programmation normal
+
+$previous_page = 'index.php';
+$open_editor_link = 'index.php?page=editor';
+$form_action_file = 'index.php?action=submit';
+$upload_ajax_url = 'index.php?action=upload_image';
+
+$toolbar_language = 'fr';
+
+$storage = 'files'; // choisir 'files' ou 'database'
+$page = 'page';
+$nom_article = "article";
+
+$php_ini_max_size = ini_get('upload_max_filesize'); // = 2M par défaut dans le php.ini
diff --git a/data/page/html/article.html b/data/page/html/article.html
new file mode 100644
index 0000000..3f0058d
--- /dev/null
+++ b/data/page/html/article.html
@@ -0,0 +1 @@
+<figure class="image image-style-side"><img src="data/page/images/chirurgien jaune.jpg" alt="image" /><figcaption>image</figcaption></figure><h2>hello</h2><figure class="table"><table><tbody><tr><td>ok</td><td>ah oui</td><td>bon</td></tr><tr><td><p>c'est pas</p><p>grave</p></td><td><p>on verra</p><p>plus tard</p></td><td>salut</td></tr></tbody></table></figure><p><i><mark class="marker-green">goodbye</mark></i></p>
\ No newline at end of file
diff --git a/data/page/images/chirurgien jaune.jpg b/data/page/images/chirurgien jaune.jpg
new file mode 100644
index 0000000..295bce2
Binary files /dev/null and b/data/page/images/chirurgien jaune.jpg differ
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..d3e2d1e
--- /dev/null
+++ b/index.php
@@ -0,0 +1,50 @@
+<?php
+// index.php
+//
+// routeur
+
+require 'config.php';
+
+if(isset($_GET['action']) && $_GET['action'] === 'upload_image') // image insérée dans l'éditeur => requête AJAX
+{
+    require 'lib/ckeditor5/image_upload.php';
+}
+elseif(isset($_GET['action']) && $_GET['action'] === 'submit') // HTML envoyé par l'éditeur
+{
+    require 'lib/ckeditor5/clean_html.php';
+    $html_from_editor = getAndCleanEditorOutput(); // manipule $_POST['contenu'];
+    
+    // enregistrement des données
+    //var_dump($html_from_editor);
+    echo "enregistrer les données et supprimer cette ligne dans index.php"; die;
+    
+    header('Location: ' . $previous_page);
+    die;
+}
+elseif(isset($_GET['page']) && $_GET['page'] === 'editor') // ouvrir l'éditeur
+{
+    require 'lib/ckeditor5/create.php';
+}
+else // $previous_page, affichage sans l'article
+{
+    // contrôleur
+    
+    // modèle
+    if($storage === 'database')
+    {}
+    elseif($storage === 'files')
+    {
+        $texte = file_get_contents('data/' . $page . '/html/' . $nom_article . '.html');
+        $texte = trim(addcslashes($texte, "'")); // échappe seulement les simples quotes
+    }
+    
+    // vue
+    $css_editeur = '';
+    $contenu = '<div class="conteneur_article" >' . $texte . '</div>
+        <p><a href="' . $open_editor_link . '">ouvrir l\'éditeur</a></p>';
+}
+
+// vue
+require 'src/templates/page.php';
+
+// fin du script
diff --git a/installation dans une application PHP.txt b/installation dans une application PHP.txt
new file mode 100644
index 0000000..210902c
--- /dev/null
+++ b/installation dans une application PHP.txt	
@@ -0,0 +1,95 @@
+1/ installation
+
+cd "mon projet"
+git clone git@ordipolo.fr:ckeditor5
+copier tout son contenu (sauf le .git) dans le dossier racine, attention quand un index.php existe déjà
+rm -r ckeditor5 --interactive=never
+
+npm install ckeditor5
+composer require htmlawed/htmlawed
+
+les 11 fichiers récupérés par le git clone:
+lib/ckeditor5/create.php
+lib/ckeditor5/clean_html.php
+lib/ckeditor5/view.php
+lib/ckeditor5/image_upload.php
+lib/ckeditor5/articles_hors_editeur.css
+config.php
+installation dans une application PHP.txt
+index.php							(appel des contrôleurs)
+src/templates/page.php				(HTML principal de la page web)
+data/page/html/articles.html
+data/page/images/chirurgien jaune.jpg
+
+
+2/ à vérifier:
+créer un lien symbolique comme ceci (commande pour debian):
+ln -s /var/www/ckeditor5/node_modules/ckeditor5/dist/translations /var/www/ckeditor5/node_modules/ckeditor5/dist/browser/
+
+ça régle un problème de chemin rencontré à la ligne: import coreTranslations from 'ckeditor5/translations/fr.js'; dans lib/ckeditor5/template.php
+gràce à un lien symbolique, le programme s'attend à trouver un dossier "translations" dans "browser"
+
+
+3/ essai
+les paramètres dans config.php et les fichiers dans data permettent normalement
+- d'ouvrir l'éditeur
+- de lire des données dans des fichiers et de les insérer dans l'éditeur pour modification
+
+la sortie au "submit" est nettoyée puis se retrouve dans $html_from_editor
+
+
+3/ intégration à un projet
+
+a) index.php et src/templates/page.php sont à remplacer en fonction de notre application
+regarder à l'intérieur et adapter son propre code
+
+b) config.php est à personnaliser et/ou à copier ailleurs,
+du moment que les variables à l'intérieur restent disponibles
+
+c) le dossier data et ses sous-dossiers ont besoin de droits en écriture
+
+a) adapter le routeur dans index.php
+
+b) adapter ce qui suit "// modèle" dans index.php et lib/ckeditor5/create.php pour obtenir les données souhaitées (BDD, fichiers)
+
+c) adapter le fichier config.php (vérifier les chemins)
+
+d) ajouter <?= $css_editeur ?> dans le <head>
+ajouter aussi <?= $contenu ?> dans le <body> pour afficher l'éditeur ou du HTML créé par l'éditeur
+
+e) insérer dans chaque page affichant des données créées avec l'éditeur:
+<link rel="stylesheet" href="lib/ckeditor5/article_hors_editeur.css" />
+l'éditeur ne génère pas de CSS mais seulement du HTML basique, ce CSS imite le rendu à l'intérieur de l'éditeur
+
+normalement c'est bon fini, ce qui suit est de l'information utile si on souhaite partir de zéro avec NPM et la doc
+
+
+
+
+
+5/ explication et choix des plugins
+tout ça est déjà fait, mais vous pouvez toujours personnaliser l'éditeur en choisissant des plugins différents
+
+voici ce que j'ai fait dans: lib/ckeditor5/template.php
+
+a) créer une importmap avec les chemins des fichiers
+<script type="importmap">
+{
+    "imports": {
+        "ckeditor5": "http://<?= $server_root ?>node_modules/ckeditor5/dist/browser/ckeditor5.js",
+        "ckeditor5/": "http://<?= $server_root ?>node_modules/ckeditor5/dist/browser/"
+    }
+}
+</script>
+
+b) charger une liste de plugins façon python
+import { "liste de plugins" } from "ckeditor5";
+
+c) rechoisir les plugins dans ClassicEditor.create():
+plugins: [ "liste de plugins" ] ...
+
+d) choisir les élément de la toolbar
+toolbar; { items: [ "éléments" ], ...
+
+e) autres éléments:
+toolbar des images et des tables, sécurité des envois AJAX
diff --git a/lib/ckeditor5/article_hors_editeur.css b/lib/ckeditor5/article_hors_editeur.css
new file mode 100644
index 0000000..a38b384
--- /dev/null
+++ b/lib/ckeditor5/article_hors_editeur.css
@@ -0,0 +1,38 @@
+.conteneur_article{width: 630px;}
+.conteneur_article:after{content: ""; display: block; clear: both;}
+
+img{vertical-align: bottom;}
+@media screen and (max-width: 1000px)
+{img{max-width: 900px;}}
+
+.text-tiny{font-size: x-small;}
+.text-small{font-size: small;}
+.text-big{font-size: large;}
+.text-huge{font-size: x-large;}
+
+blockquote{border-left: 5px #cccccc solid; margin: 14px 0px; padding: 2px 25px; font-style: italic;}
+
+.marker-yellow{background-color: #fdfd77;}
+.marker-green{background-color: #62f962;}
+.marker-pink{background-color: #fc7899;}
+.marker-blue{background-color: #72ccfd;}
+.pen-red{background-color: white; color: red;}
+.pen-green{background-color: white; color: green;}
+
+ul{padding-left: 10px;}
+.todo-list>li{list-style-type : none;}
+input[type=checkbox]{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;
+height: 16px; width: 16px; border: 1px solid black; border-radius: 2px; position: relative; top: 5px; margin-right: 10px;}
+input[type="checkbox"]:checked{border: none; background: #26ab33;}
+
+.table>table{border-collapse: collapse;}
+.table td{border: 1px grey solid; padding: 7px; min-width: 30px;}
+td p{margin: 0px;}
+
+.image{margin: 0px; text-align: center; display: inline-block;}
+.image-style-side{float: right;}
+.image img{max-width: 630px;}
+.image-style-side img{max-width: 315px;}
+.image>figcaption{margin: 0px 10px;  padding: 7px; text-align: center; font-size: small; background-color: #f7f7f7;}
+
+iframe{min-width: 400px; min-height: 300px; max-width: 1200px; max-height: 900px;}
diff --git a/lib/ckeditor5/clean_html.php b/lib/ckeditor5/clean_html.php
new file mode 100644
index 0000000..5d00532
--- /dev/null
+++ b/lib/ckeditor5/clean_html.php
@@ -0,0 +1,46 @@
+<?php
+// lib/ckeditor5/clean_html.php
+
+function getAndCleanEditorOutput(): string
+{
+    // bugs possibles sans trim() lorsqu'on insère le HTML dans l'éditeur
+    $html = trim($_POST["contenu"]);
+
+    
+    // pour debugguer ou tester des paramètres avec htmlawed
+    
+    //~ $nom_fichier = "avant.html";
+    //~ $fichier = fopen('data/'  . $page . '/' . $nom_fichier, 'w'); // w peut créer un fichier, si il existe déjà, il est effacé par le nouveau contenu
+    //~ fputs($fichier, $html);
+    //~ fclose($fichier);
+    //~ chmod('data/' . $page . '/' . $nom_fichier, 0666);
+
+    
+    // sécurisation du HTML (faille XSS)
+    require 'vendor/htmlawed/htmlawed/htmLawed.php';
+    $configHtmLawed = array(
+        'safe'=>1, // protection contre les élements et attributs dangereux
+        
+        // balises autorisées
+        'elements'=>'h2, h3, h4, p, span, i, strong, u, s, mark, blockquote, li, ol, ul, a, figure, hr, img, figcaption, table, tbody, tr, td',
+        // note: change <s></s> en <span style="text-decoration: line-through;"></span>
+        
+        // attributs interdits
+        'deny_attribute'=>'id', // 'class' et 'style' sont conservés pour le ckeditor
+    );
+    $specHtmLawed = ''; // optionnel: faire qu'un certain élément puisse n'avoir que certains attributs
+    $html = htmLawed($html, $configHtmLawed, $specHtmLawed);
+    
+    
+    //~ $nom_fichier = "après.html";
+    //~ $fichier = fopen('data/'  . $page . '/' . $nom_fichier, 'w'); // w peut créer un fichier, si il existe déjà, il est effacé par le nouveau contenu
+    //~ fputs($fichier, $html);
+    //~ fclose($fichier);
+    //~ chmod('data/' . $page . '/' . $nom_fichier, 0666);
+    
+    
+    return $html;
+}
+
+
+
diff --git a/lib/ckeditor5/create.php b/lib/ckeditor5/create.php
new file mode 100644
index 0000000..d62f893
--- /dev/null
+++ b/lib/ckeditor5/create.php
@@ -0,0 +1,16 @@
+<?php
+// lib/ckeditor5/create.php
+
+// modèle
+if($storage === 'database')
+{}
+elseif($storage === 'files')
+{
+    // modèle
+    $texte = file_get_contents('data/' . $page . '/html/' . $nom_article . '.html');
+    $texte = trim(addcslashes($texte, "'")); // échappe seulement les simples quotes
+}
+
+// vue
+require 'lib/ckeditor5/view.php'; // html + JS
+$contenu = $editeurHTML;
diff --git a/lib/ckeditor5/image_upload.php b/lib/ckeditor5/image_upload.php
new file mode 100644
index 0000000..607be1b
--- /dev/null
+++ b/lib/ckeditor5/image_upload.php
@@ -0,0 +1,64 @@
+<?php
+// lib/ckeditor5/image_upload.php
+
+// script récupérant les images téléchargée en AJAX par l'éditeur et c'est tout
+// on récupère les données, on renvoie au navigateur la réponse qu'il attend et stop!
+
+// le "simple upload adapter" envoie un POST appelé: $_FILES['upload']
+// en retour il attend impérativement des données au format JSON du genre: {"url": "data/page/images/monfichier.jpg"}
+// cette adresse doit permettre à l'éditeur de télécharger l'image afficher de manière normale: <img scr="data/page/images/monfichier.jpg">
+
+// pour voir cette réponse, les messages d'erreur ou tout affichage avec echo ou var_dump:
+// outils de développement (F12) => réseau => trouver la requête (xhr) => cliquer dessus puis sur réponse
+
+// rappel: le téléchargement de fichier avec PHP nécessite un dossier temporaire et que le serveur y soit autorisé en écriture
+
+
+$erreur = '';
+if(isset($_FILES['upload']) AND $_FILES['upload']['error'] == 0) // 0 signifie ok
+{
+    if($_FILES['upload']['size'] <= $php_ini_max_size )
+    {
+        $infos = pathinfo ($_FILES['upload']['name']);
+        $extension = $infos['extension'];
+        $extautorisées = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff'];
+        // on prend la même liste que celle côté javascript, le SVG est bloqué pour raison de sécurité (javascript à l'intérieur)
+        if(in_array($extension, $extautorisées))
+        {
+            move_uploaded_file ($_FILES['upload']['tmp_name'], 'data/' . $page . '/images/' . $_FILES['upload']['name']);
+            chmod('data/' . $page . '/images/' . $_FILES['upload']['name'], 0666);
+        }
+        else
+        {
+            $erreur = 'mauvais format, veuillez utiliser une image comportant un de ces formats: jpg ou jpeg, png, gif, bmp, webp, tiff<br />le format svg n\'est pas supporté';
+        }
+    }
+    else
+    {
+        $erreur = 'fichier trop lourd';
+    }
+}
+else
+{
+    $erreur = $_FILES['upload']['error'];
+}
+/* les erreurs retournées avec $_FILES['upload']['error']:
+0 pas d'erreur
+1 taille du fichier supérieure à la valeur de upload_max_filesize dans le fichier php.ini (par défaut = 2 MO)
+2 taille du fichier supérieure à la valeur de MAX_FILE_SIZE dans le formulaire HTML
+3 fichier partiellement téléchargé
+4 pas de fichier du tout
+6 pas de dossier temporaire pour mettre le fichier
+7 echec de l'écriture sur le DD
+8 envoi arrêté par une extension de PHP mais on ne nous dit pas pourquoi => diagnostic avec la fonction phpinfo() */
+
+if(empty($erreur))
+{
+    $chemin = '{"url": "data/' . $page . '/images/' . $_FILES['upload']['name'] . '"}';
+    echo $chemin;
+}
+else
+{
+    echo $erreur;
+}
+die;
diff --git a/lib/ckeditor5/view.php b/lib/ckeditor5/view.php
new file mode 100644
index 0000000..6d6c961
--- /dev/null
+++ b/lib/ckeditor5/view.php
@@ -0,0 +1,171 @@
+<?php
+// lib/ckeditor5/view.php
+
+//$css_editeur = '<link rel="stylesheet" href="node_modules/ckeditor5/dist/ckeditor5.css" />'; // version normale aérée et commentée
+$css_editeur = '<link rel="stylesheet" href="node_modules/ckeditor5/dist/browser/ckeditor5.css" />'; // version "minifiée"
+
+ob_start();
+?>
+<div class="conteneur_article" >
+    <form action="<?= $form_action_file ?>" method="POST" enctype="multipart/form-data" >
+        <textarea id="editor" name="contenu" ></textarea>
+        <input class="boutonSubmitEditeur" type="submit" value="Valider">
+        <a class="boutonAnnuler" href="<?= $previous_page ?>" >
+            <input type="button" value="Annuler"></a>
+        <script type="importmap">
+        {
+            "imports": {
+                "ckeditor5": "http://<?= $server_root ?>node_modules/ckeditor5/dist/browser/ckeditor5.js",
+                "ckeditor5/": "http://<?= $server_root ?>node_modules/ckeditor5/dist/browser/"
+            }
+        }
+        </script>
+        <script type="module">
+            import { // nécessite type="module"
+                ClassicEditor, Essentials, Heading, Paragraph, Alignment, List,
+                BlockQuote, HorizontalLine, Bold, Italic, Underline, Strikethrough,
+                Font, FontFamily, Highlight, FontBackgroundColor, SimpleUploadAdapter,
+                Image, ImageInsert, ImageToolbar, ImageStyle, ImageCaption, LinkImage,
+                Link, Table, TableColumnResize, TableToolbar, TableProperties, TableCellProperties, TextPartLanguage
+            } from "ckeditor5";
+            
+            import coreTranslations from 'ckeditor5/translations/<?= $toolbar_language ?>.js';
+            // n'utilise pas le bon chemin à cause d'un bug? solution = créer un lien symbolique à l'endroit attendu:
+            // ln -s /srv/http/ckeditor5/node_modules/ckeditor5/dist/translations /srv/http/ckeditor5/node_modules/ckeditor5/dist/browser/
+            
+            //import 'ckeditor5/ckeditor5.css'; // marche pas chez moi
+            
+            let editor;
+            let html_existant = '<?= $texte ?>'; // $texte doit avoir été sécurisé: simple quotes échappées au minimum
+            let upload_url = '<?= $upload_ajax_url ?>';
+            
+            // 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' ),{
+                    
+                    plugins: [ Essentials, Heading, Paragraph, Alignment, List,
+                        BlockQuote, HorizontalLine, Underline, Strikethrough,
+                        Bold, Italic, Font, FontFamily, Highlight, FontBackgroundColor, SimpleUploadAdapter,
+                        Image, ImageInsert, ImageToolbar, ImageStyle, ImageCaption, LinkImage,
+                        Link, Table, TableColumnResize, TableToolbar, TableProperties, TableCellProperties, TextPartLanguage],
+                    
+                    toolbar: {
+                        items: [ 
+                            'undo', 'redo', 'selectAll', '|', 'heading', '|', 'alignment', 'bulletedList', 'numberedList',
+                            //'todoList',// marche pas, ne crée pas de HTML
+                            'blockQuote', 'horizontalLine', '|', 'textPartLanguage', '-', 'bold', 'italic', 'underline', 'strikethrough', '|',
+                            'fontFamily', // polices microsoft uniquement
+                            'fontColor', 'fontSize', 'highlight', 'fontBackgroundColor', // un peu comme highlight
+                            '|', 'imageInsert', 'link',
+                            //'htmlEmbed', // marche pas, ne crée pas de HTML
+                            //'mediaEmbed',
+                            'insertTable',
+                        ],
+                        // multiligne automatique (le '-' dans la liste permet de choisir l'endroit où couper)
+                        // pour les plugins indiqués "marche pas", envoient-ils un requête AJAX quelque part?
+                        
+                        shouldNotGroupWhenFull: true
+                    },
+                    
+                    language: '<?= $toolbar_language ?>',
+                    translations: [coreTranslations],
+                    
+                    // barre d'outils dans une image
+                    image: {
+                        toolbar: [
+                            //'imageStyle:full', //inutile?
+                            'imageStyle:block',
+                            'imageStyle:inline', // complexe, on peut aussi placer l'image à la souris
+                            'imageStyle:side',
+                            /*'imageStyle:align-left',
+                            'imageStyle:align-right',*/
+                            //'imageResize', // optionnel? on a les poignées dans les coins de l'image
+                            'linkImage',
+                            'toggleImageCaption',
+                            'imageTextAlternative'
+                        ]
+                    },
+                    
+                    // barre d'outils dans un tableau
+                    table: {
+                        contentToolbar: [
+                            'tableColumn', // manipulation sur les colonnes et lignes
+                            'tableRow',
+                            'mergeTableCells',
+                            'tableProperties', // style sur la table
+                            'tableCellProperties' // style sur une cellule
+                        ]
+                    },
+                    
+                    // langues dispo pour TextPartLanguage
+                    language: {
+                        textPartLanguage: [
+                            { title: 'Arabic', languageCode: 'ar' },
+                            { title: 'English', languageCode: 'en' },
+                            { title: 'French', languageCode: 'fr' },
+                            { title: 'German', languageCode: 'de' },
+                            { title: 'Hebrew', languageCode: 'he' },
+                            { title: 'Spanish', languageCode: 'es' }
+                        ]
+                    },
+                    
+                    // plugin code HTML
+                    // voir doc
+                    
+                    // 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" devrait 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
+                    // le plugin "simple upload adapter" 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"}
+                    simpleUpload: {
+                        uploadUrl: upload_url,
+                        
+                        // 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
+                    
+                    // plugin autosave
+                    // voir doc
+                } )
+                .then( newEditor => {
+                    editor = newEditor;
+                // fin de ClassicEditor
+                
+                // 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 ));
+                
+                // insertion du HTML existant
+                editor.setData(html_existant);
+                } )
+                .catch( error => {
+                    console.error( error );
+                } );
+        </script>
+    </form>
+</div>
+<?php
+$editeurHTML = ob_get_clean();
diff --git a/src/templates/page.php b/src/templates/page.php
new file mode 100644
index 0000000..98e7979
--- /dev/null
+++ b/src/templates/page.php
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="icon" type="image/png" href="">
+    <link rel="stylesheet" href="lib/ckeditor5/article_hors_editeur.css" />
+    <?= $css_editeur ?>
+</head>
+<body>
+    <div>
+        <?= $contenu ?>
+    </div>
+</body>
+</html>
-- 
cgit v1.2.3