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 9 fichiers récupérés par le git clone
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)
src/templates/page.php              (HTML principal de la page web)
data/page/html/1646148841.html
data/page/images/chirurgien jaune.jpg


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"

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) index.php et src/templates/page.php sont à remplacer en fonction de notre application

b) adapter les paramètres dans CKEditor.php, $storage_mode vaut soit 'files' soit 'database'

c) le dossier data et ses sous-dossiers ont besoin de droits en écriture

d) adapter le routeur dans index.php

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() ?>

h) insérer <?= $editeurHTML ?> dans toutes les pages,
quand l'éditeur n'est pas ouvert, ça fait apparaître un lien pour l'ouvrir


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