mot de passe

1 files changed, 189 insertions, 0 deletions

diff --git a/view/template-ckeditor.php b/view/template-ckeditor.php
new file mode 100644
index 0000000..48b673a
--- /dev/null
+++ b/view/template-ckeditor.php
@@ -0,0 +1,189 @@
+<?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)
+
+// l'envoi d'image en revanche utilise nécessairement de l'AJAX et
+// la bibliothèque "ckfinder" (en JS + PHP) me permet de ne pas coder moi-même un "upload adapter", ce sera l'objet d'une autre amélioration, et en plus certaines fonctionnalités sont payantes
+// https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html
+// le ckfinder communique avec le serveur au moyen de requêtes AJAX,
+// le fichier est ainsi téléchargé sur le serveur avant même d'apparaître dans l'éditeur
+// attention, le ckfinder nécessite php7.3, les extensions GD et FileInfo et le support du type MIME JSON sur le serveur (retenir php7.3 et GD)
+// https://ckeditor.com/ckfinder/download/
+
+// variable $editeurHTML
+ob_start();
+?>
+
+    <div class="conteneur_article" >
+    <form action="index.php?page=<?= $page_actuelle ?>&article=<?= $numArticle ?>&action=submit" method="post" >
+        <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é il me semble, apparemment 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 = '<?= $initial ?>';
+                editor.setData(initial);
+            } )
+            .catch( error => {
+                console.error( error );
+            } );
+        </script>
+    </form>
+    </div>
+<?php
+$editeurHTML = ob_get_clean();
\ No newline at end of file