diff options
Diffstat (limited to 'installation dans une application PHP.txt')
| -rw-r--r-- | installation dans une application PHP.txt | 95 |
1 files changed, 95 insertions, 0 deletions
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 | 1/ installation | ||
| 2 | |||
| 3 | cd "mon projet" | ||
| 4 | git clone git@ordipolo.fr:ckeditor5 | ||
| 5 | copier tout son contenu (sauf le .git) dans le dossier racine, attention quand un index.php existe déjà | ||
| 6 | rm -r ckeditor5 --interactive=never | ||
| 7 | |||
| 8 | npm install ckeditor5 | ||
| 9 | composer require htmlawed/htmlawed | ||
| 10 | |||
| 11 | les 11 fichiers récupérés par le git clone: | ||
| 12 | lib/ckeditor5/create.php | ||
| 13 | lib/ckeditor5/clean_html.php | ||
| 14 | lib/ckeditor5/view.php | ||
| 15 | lib/ckeditor5/image_upload.php | ||
| 16 | lib/ckeditor5/articles_hors_editeur.css | ||
| 17 | config.php | ||
| 18 | installation dans une application PHP.txt | ||
| 19 | index.php (appel des contrôleurs) | ||
| 20 | src/templates/page.php (HTML principal de la page web) | ||
| 21 | data/page/html/articles.html | ||
| 22 | data/page/images/chirurgien jaune.jpg | ||
| 23 | |||
| 24 | |||
| 25 | 2/ à vérifier: | ||
| 26 | créer un lien symbolique comme ceci (commande pour debian): | ||
| 27 | ln -s /var/www/ckeditor5/node_modules/ckeditor5/dist/translations /var/www/ckeditor5/node_modules/ckeditor5/dist/browser/ | ||
| 28 | |||
| 29 | ça régle un problème de chemin rencontré à la ligne: import coreTranslations from 'ckeditor5/translations/fr.js'; dans lib/ckeditor5/template.php | ||
| 30 | gràce à un lien symbolique, le programme s'attend à trouver un dossier "translations" dans "browser" | ||
| 31 | |||
| 32 | |||
| 33 | 3/ essai | ||
| 34 | les paramètres dans config.php et les fichiers dans data permettent normalement | ||
| 35 | - d'ouvrir l'éditeur | ||
| 36 | - de lire des données dans des fichiers et de les insérer dans l'éditeur pour modification | ||
| 37 | |||
| 38 | la sortie au "submit" est nettoyée puis se retrouve dans $html_from_editor | ||
| 39 | |||
| 40 | |||
| 41 | 3/ intégration à un projet | ||
| 42 | |||
| 43 | a) index.php et src/templates/page.php sont à remplacer en fonction de notre application | ||
| 44 | regarder à l'intérieur et adapter son propre code | ||
| 45 | |||
| 46 | b) config.php est à personnaliser et/ou à copier ailleurs, | ||
| 47 | du moment que les variables à l'intérieur restent disponibles | ||
| 48 | |||
| 49 | c) le dossier data et ses sous-dossiers ont besoin de droits en écriture | ||
| 50 | |||
| 51 | a) adapter le routeur dans index.php | ||
| 52 | |||
| 53 | b) adapter ce qui suit "// modèle" dans index.php et lib/ckeditor5/create.php pour obtenir les données souhaitées (BDD, fichiers) | ||
| 54 | |||
| 55 | c) adapter le fichier config.php (vérifier les chemins) | ||
| 56 | |||
| 57 | d) ajouter <?= $css_editeur ?> dans le <head> | ||
| 58 | ajouter aussi <?= $contenu ?> dans le <body> pour afficher l'éditeur ou du HTML créé par l'éditeur | ||
| 59 | |||
| 60 | e) insérer dans chaque page affichant des données créées avec l'éditeur: | ||
| 61 | <link rel="stylesheet" href="lib/ckeditor5/article_hors_editeur.css" /> | ||
| 62 | 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 | ||
| 63 | |||
| 64 | 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 | ||
| 65 | |||
| 66 | |||
| 67 | |||
| 68 | |||
| 69 | |||
| 70 | 5/ explication et choix des plugins | ||
| 71 | tout ça est déjà fait, mais vous pouvez toujours personnaliser l'éditeur en choisissant des plugins différents | ||
| 72 | |||
| 73 | voici ce que j'ai fait dans: lib/ckeditor5/template.php | ||
| 74 | |||
| 75 | a) créer une importmap avec les chemins des fichiers | ||
| 76 | <script type="importmap"> | ||
| 77 | { | ||
| 78 | "imports": { | ||
| 79 | "ckeditor5": "http://<?= $server_root ?>node_modules/ckeditor5/dist/browser/ckeditor5.js", | ||
| 80 | "ckeditor5/": "http://<?= $server_root ?>node_modules/ckeditor5/dist/browser/" | ||
| 81 | } | ||
| 82 | } | ||
| 83 | </script> | ||
| 84 | |||
| 85 | b) charger une liste de plugins façon python | ||
| 86 | import { "liste de plugins" } from "ckeditor5"; | ||
| 87 | |||
| 88 | c) rechoisir les plugins dans ClassicEditor.create(): | ||
| 89 | plugins: [ "liste de plugins" ] ... | ||
| 90 | |||
| 91 | d) choisir les élément de la toolbar | ||
| 92 | toolbar; { items: [ "éléments" ], ... | ||
| 93 | |||
| 94 | e) autres éléments: | ||
| 95 | toolbar des images et des tables, sécurité des envois AJAX | ||