v2 avec NPM et composer, customizable et plus facile à intégrer

11 files changed, 515 insertions, 0 deletions

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
--- /dev/null
+++ b/data/page/images/chirurgien jaune.jpg
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>