summaryrefslogtreecommitdiff
path: root/view/template-ckeditor.php
diff options
context:
space:
mode:
authorpolo <contact@ordipolo.fr>2021-08-10 04:26:16 +0200
committerpolo <ordipolo@gmx.fr>2021-08-10 16:02:47 +0200
commit47d650911124f833dd5fe94e31594bd591d6f372 (patch)
tree41206644d042160072e7191da72a23cdc70b0280 /view/template-ckeditor.php
parentc8edbb1e1a7271ae50012102a3414a42a86448b7 (diff)
downloadmelaine-47d650911124f833dd5fe94e31594bd591d6f372.zip
formulaires
Diffstat (limited to 'view/template-ckeditor.php')
-rw-r--r--view/template-ckeditor.php185
1 files changed, 0 insertions, 185 deletions
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 @@
1<?php
2// view/template-ckeditor.php
3
4// voici la partie HTML et javascript du ckeditor,
5// elle permette d'insérer l'éditeur dans la page avec un formulaire qui comporte 4 éléments:
6// barre d'outils, zone de saisie, formulaire caché, bouton "valider"
7
8// le formulaire est presque classique, en effet on utilise le ckeditor 5 dans sa version "Document" (ou DecoupledEditor):
9// - avantage: plus de possibilité dans la barre d'outils (se rapproche d'un traitement de texte)
10// - inconvénient: on ne peut utiliser la balise <textarea> qu'on remplace par une <div>
11
12// pour pouvoir envoyer le contenu dans le POST, on a deux possibilité:
13// - 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
14// - utiliser l'astuce du formulaire caché !
15
16// le javascript place les données dans le formulaire caché
17// avec la fonction envoiDonnees(), les données se retrouvent dans une <input> et sont donc envoyées avec par la POST (haha)
18
19// variable $editeurHTML
20ob_start();
21?>
22
23 <div class="conteneur_article" >
24 <form action="index.php?page=<?= $page_actuelle ?>&article=<?= $numArticle ?>&action=submit" method="post" >
25<?php
26if($page_actuelle == 'discographie')
27{
28 echo($additionalInputs . "<p><i>Infos qui seront affichées dans la page dédiée:</i></p>");
29}
30?>
31
32 <textarea id="editor" name="contenu" ></textarea>
33<?php
34// falsification de requête inter-site
35// on ajoute un formulaire caché avec une valeur aléatoire cryptée utilisable une seule fois (=jeton)
36
37// "Vous pouvez rendre chaque jeton utilisable une seule fois et ainsi éviter de rejouer plusieurs fois la même requête.
38// Les jetons sont stockés dans le back-office.
39// Une rotation des jetons est effectuée quand le nombre maximum a été atteint, les plus vieux en premier.
40// Chaque jeton peut être lié à une URL spécifique.
41// Si un jeton est intercepté, il ne peut pas être utilisé dans un autre contexte.
42// Si besoin, les jetons peuvent être attachés à une adresse IP spécifique.
43// Depuis la version v2.1, les jetons peuvent être réutilisés (par exemple pour les requêtes AJAX).
44// Si vous n’utilisez pas un framework qui gère la protection CSRF pour vous, jetez un oeil à Anti-CSRF."
45
46// une bibli qui fait ça: https://github.com/paragonie/anti-csrf
47?>
48
49 <input class="boutonSubmitEditeur" type="submit" value="Valider" onclick="envoiDonnees();" />
50
51 <script>
52 let editor; // variable utilisable depuis une fonction
53
54 // code exécuté à la validation du formulaire
55 function envoiDonnees()
56 {
57 // supprimer le positionnement absolu de l'iframe
58 //~ let balisesIframe = document.getElementsByTagName("iframe");
59 //~ for(var i = 0; i < balisesIframe.length; i++)
60 //~ {
61 //~ alert(balisesIframe[i].getAttribute("style")); // affiche le CSS
62 //~ balisesIframe[i].removeAttribute("style");
63 //~ alert(balisesIframe[i].getAttribute("style")); // affiche null
64 //~ }
65 }
66
67 // ATTENTION: si l'éditeur ne fonctionne pas, empêcher qu'on puisse cliquer sur Valider!
68 // Il y a aussi des paramètres dans le fichier de config: ckeditor/webpack.config.js
69 ClassicEditor
70 .create( document.querySelector( '#editor' ),{
71 language: 'fr',
72
73 // barre d'outils à adapter au build
74 toolbar: {
75 items: [ 'undo', 'redo', 'selectAll', '|', 'heading', '|', 'alignment', 'bulletedList', 'numberedList', 'todoList', 'blockQuote', 'horizontalLine', '-', 'bold', 'italic', 'underline',
76 //'strikethrough',
77 '|',
78 //'fontFamily',
79 'fontColor', 'fontSize', 'highlight', '|', 'imageInsert', 'link',
80 //'htmlEmbed',
81 //'mediaEmbed',
82 'insertTable'
83 //'|', 'textPartLanguage'
84 ],
85 // multiligne automatique (le '-' dans la liste permet de choisir l'endroit où couper)
86 shouldNotGroupWhenFull: true
87
88 // noter que 'fontFamily' ne comporte que des polices microsoft => problèmes de droits?
89 // de plus, il faut que le navigateur connaisse toutes les polices
90 },
91
92 // barre d'outils dans une image
93 image: {
94 toolbar: [
95 'imageTextAlternative',
96 'imageStyle:full',
97 'imageStyle:side',
98 'linkImage'
99 ]
100 },
101
102 // barre d'outils dans un tableau
103 table: {
104 contentToolbar: [
105 'tableColumn',
106 'tableRow',
107 'mergeTableCells',
108 //'tableCellProperties',
109 'tableProperties'
110 ]
111 },
112
113 // plugin code HTML
114 // pour coller le code HTML "embed" proposé par certains sites
115
116 // media embarqué (audio, vidéo, carte)
117 //mediaEmbed: {
118 //previewsInData: true,
119 // vaut "false" par defaut, on crée la balise non standard <oembed url="" > // https://oembed.com/
120 // qui nécessite un traitement (en JS ou côté serveur) en utilisant le lien à l'intérieur
121 // avec "true", on crée la balise <iframe> qui sert à insérer une page HTML dans une autre,
122 // notre "embarquement de média" devrit donc réussir quelque soit le site
123 // c'est plus simple, il ne reste plus qu'à ajuster le contenu avec du CSS (important)
124 // 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
125
126 // en outre, le plugin mediaEmbed (dans l'éditeur), tout comme la balise "iframe" (hors éditeur),
127 // permettent d'afficher un aperçu (preview): une image avec un bouton lecture dessus
128 // cette image est envoyée imédiatement par le serveur, et le contenu après un clic dessus
129 //
130 //},
131
132 // images
133 // https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html
134 // le plugin "image upload" s'occupe est la partie graphique, il crée un objet "createLoader",
135 // le plugin "simple upload adapter" est la classe qui communique avec le serveur au moyen de requêtes AJAX
136 // il attend du serveur une réponse au format .json contenant l'adresse où est stockée l'image:
137 //{
138 // "url": "https://example.com/images/foo.jpg"
139 //}
140 // cette url sert à deux choses:
141 // - à télécharger l'image avant de la placer dans l'éditeur
142 // - écrire le HTML qu'on enregistrera ensuite
143 // en effet, le fichier est téléchargé sur le serveur avant de revenir dans l'éditeur comme un téléchargement classique
144 simpleUpload: {
145 uploadUrl: 'imageAJAX.php?page=<?= $page_actuelle ?>',
146 // noter qu'il est possible (parce que souhaitable je ne pense pas) d'envoyer une requête AJAX
147 // en indiquant une adresse "statique" du type: fichier.txt ou .xml, jpg, png, etc
148
149 // Headers supplémentaires envoyés avec la requête
150 // c'est ici qu'on installe les mécanismes de sécurités comme l'authentification et la protection au CSRF
151 headers: {
152 'X-CSRF-TOKEN': 'CSRF-Token',
153 Authorization: 'Bearer <JSON Web Token>'
154 }
155 },
156 // formats acceptés par défaut: jpeg, png, gif, bmp, webp, tiff
157 // 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
158
159 // ce plugin a l'intérêt de ne pas imposer l'utilisation de l'extension GD de PHP,
160 // Reste qu'il sera quand même intéressant de l'ajouter pour le redimensionnement des images trop lourdes,
161 // 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
162
163
164 // plugin autosave
165 } )
166
167 .then( newEditor => {
168 editor = newEditor;
169
170 // obtenir la liste des éléments disponibles pour la barre d'outils
171 //alert(Array.from( editor.ui.componentFactory.names() ));
172 // obtenir la liste des plugins disponibles:
173 //alert(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));
174
175 var initial = '<?= $texte ?>';
176 editor.setData(initial);
177 } )
178 .catch( error => {
179 console.error( error );
180 } );
181 </script>
182 </form>
183 </div>
184<?php
185$editeurHTML = ob_get_clean(); \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-19 07:33:54 +0000