From 141291c29306391f91e7ceee57ff4d6e9907ab1d Mon Sep 17 00:00:00 2001 From: polo Date: Fri, 21 Mar 2025 00:47:16 +0100 Subject: dossier public --- installation ckeditor.txt | 101 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 installation ckeditor.txt (limited to 'installation ckeditor.txt') diff --git a/installation ckeditor.txt b/installation ckeditor.txt new file mode 100644 index 0000000..08f19ae --- /dev/null +++ b/installation ckeditor.txt @@ -0,0 +1,101 @@ +1/ installation + +cd "mon projet" +git clone git@ordipolo.fr:ckeditor5 +copier tout son contenu (sauf le .git) dans le dossier racine de notre application et supprimer le dossier source +rm -r ckeditor5 --interactive=never +attention quand un index.php existe déjà + +les fichiers composer.json et package.json sont volontairement absents +faire un install (npm) et un require (composer) dans son projet, obtenir la dernière version de l'éditeur et essuyer les plâtres! +npm install ckeditor5 +composer require htmlawed/htmlawed + +les fichiers récupérés par le git clone, src/integration/ckeditor5/ est à insérer dans son projet: +src/integration/ckeditor5/CKEditor.php +src/integration/ckeditor5/view.php +src/integration/ckeditor5/image_upload.php +src/integration/ckeditor5/articles_hors_editeur.css +installation dans une application PHP.txt +index.php (appel des contrôleurs) +data/page/html/1646148841.html +data/page/html/1646148842.html +data/page/images/chirurgien jaune.jpg +data/page/images/garfield4.png + + +2/ lien symbolique nécéssaire pour trouver les traductions (commande pour debian): +un problème de chemin se produit à 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" +le dossier concerné est node_modules/ckeditor5/dist/browser, on doit lui donner plus de droits + +PHP l'ajoute avec symlink dans index.php +si le lien symbolique /srv/http/ckeditor5/node_modules/ckeditor5/dist/browser/translations +n'a pas été créé correctement par PHP, permettre au serveur d'écrire dans "browser" ou le faire en BASH +la commande mklink permet de faire la même chose sur un serveur windows, l'option /J créée une jointure et fonctionne sans droit d'admin + +chemin absolu +ln -s /var/www/ckeditor5/node_modules/ckeditor5/dist/translations /var/www/ckeditor5/node_modules/ckeditor5/dist/browser/ +chemin relatif +ln -s ../translations node_modules/ckeditor5/dist/browser/ + + +3/ essai +les paramètres dans CKEditor.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 + + +4/ intégration à un projet + +a) insérer le dossier: src/integration/ckeditor5/ + +b) adapter les paramètres dans CKEditor.php, $storage_mode vaut soit 'files' soit 'database' + +c) les autres fichiers sont un exemple pour y prendre du code, +=> piocher dans index.php! + +d) le dossier data et ses sous-dossiers ont besoin de droits en écriture + +e) adapter la connexion à la BDD si nécéssaire + +f) insérer dans chaque page affichant des données créées avec l'éditeur: +getCSSOutsideEditorTag() ?> +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 + +g) ajouter dans chaque page insérant l'éditeur: +getCSSEditorTag() ?> + + +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 + + +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 -- cgit v1.2.3