dossier publicHEADmaster

1 files changed, 101 insertions, 0 deletions

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:
+<?= $ckeditor->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:
+<?= $ckeditor->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
+<script type="importmap">
+{
+    "imports": {
+        "ckeditor5": "http://<?= $server_root ?>node_modules/ckeditor5/dist/browser/ckeditor5.js",
+        "ckeditor5/": "http://<?= $server_root ?>node_modules/ckeditor5/dist/browser/"
+    }
+}
+</script>
+
+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