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à 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): chemin absolu ln -s /var/www/ckeditor5/node_modules/ckeditor5/dist/translations /var/www/ckeditor5/node_modules/ckeditor5/dist/browser/ chemin relatif de la racine de l'appli: ln -s ../translations 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
ajouter aussi = $contenu ?> dans le 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: 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 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