blob: fb5d3a62e95b8b17fb36acdedcbcaabb42182d12 (
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
|
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à
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/ à vérifier:
créer un lien symbolique comme ceci (commande pour debian):
chemin absolu
ln -s /var/www/ckeditor5/node_modules/ckeditor5/dist/translations /var/www/ckeditor5/node_modules/ckeditor5/dist/browser/
chemin relatif de la racine de l'appli:
ln -s ../translations node_modules/ckeditor5/dist/browser/
ça régle un problème de chemin rencontré à 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"
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
|
