blob: 21d1b0b6b01dd260dd2c05ca5fbd816763812c62 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
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 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/ 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, donner serveur les droits en écriture ou le faire en BASH
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 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 <head>
ajouter aussi <?= $contenu ?> dans le <body> 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:
<link rel="stylesheet" href="lib/ckeditor5/article_hors_editeur.css" />
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
<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
|
