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
|
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
|
