Skip to Content
Last modified by Julien EYMERY on 2015/07/15 10:00
Show last authors
1 Il existe plusieurs éditeurs de texte riche disponibles sur le marché (dont certains inclus dans des frameworks généralistes Web 2.0 comme JQuery, YUI, Ext JS, Dojo toolkit, etc.). Voici quelques pointeurs :
2
3 - [[http://blog.webdistortion.com/2008/03/09/9-of-the-best-rich-text-editors-reviewed/>>url:http://blog.webdistortion.com/2008/03/09/9-of-the-best-rich-text-editors-reviewed/]]
4 - [[http://woork.blogspot.com/2009/02/best-rich-text-editors-ready-to-use-in.html>>url:http://woork.blogspot.com/2009/02/best-rich-text-editors-ready-to-use-in.html]]
5 - [[http://www.commentcamarche.net/faq/10000-les-editeurs-de-texte-formate-rich-text-editors>>url:http://www.commentcamarche.net/faq/10000-les-editeurs-de-texte-formate-rich-text-editors]]
6
7 Pour cet exemple, on utilisera un des plus connus : CKEditor ([[http://ckeditor.com/>>url:http://ckeditor.com/]]). Ce produit est disponible sous une tripe licence GPL, LGPL et MPL.
8 La version utilisée est la 3.3.1.
9
10 {{hardis-info type="warning" icon="true"}}
11 Attention : ceci n'est qu'une pré-étude. Pour plus de détails de le mode de fonctionnement, voir la page [[http://docs.cksource.com/CKEditor_3.x/Developers_Guide>>url:http://docs.cksource.com/CKEditor_3.x/Developers_Guide]].
12 {{/hardis-info}}
13
14 (((
15 ==
16 Intégration du module Javascript dans la page Adélia Web ==
17 )))
18
19 Télécharger le fichier ckeditor_3.3.1.zip à la page [[http://ckeditor.com/download>>url:http://ckeditor.com/download]] et le décompresser à la racine de votre application Web.
20
21 Dans la page Web, inclure le fichier Javascript ckeditor.js à l'aide de cette balise
22
23
24 {{code language="xml" language="xml"}}
25 <script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
26 {{/code}}
27
28
29 à placer dans la balise HEAD.
30
31 Le fichier ckeditor.js pèse 309 Ko (compressé et minifié). Compter environ 50 Ko de plus pour les fichiers de thèmes (Skin) et de localisation des textes en fonction de la langue utilisée.
32 (((
33 == Intégration à une zone Adélia Web ==
34 )))
35
36 Cet éditeur peut être crée à partir d'une balise TEXTAREA (objet Adélia champ de saisi multiligne). Pour cela, placer la zone Adélia de type ALPHA :
37
38
39 {{code language="xml" language="xml"}}
40 <adelia:entryfield type="ALPHA" length="15000" ><textarea name="CHS_EDITOR" id="CHS_EDITOR" rows="3" cols="15" ></textarea></adelia:entryfield>
41 {{/code}}
42
43
44 - le nombre de lignes et colonnes (attributs rows et cols) n'a pas d'importance car ils ne sont pas pris en compte par l'éditeur,
45 - prévoir une longueur suffisante pour le type ALPHA car :
46 * à ma connaissance, il n'est pas possible de fixer le nombre maximal de caractères saisis dans l'éditeur,
47
48
49 * le texte retourné par l'éditeur est formaté au format HTML (donc le nombre de caractères saisis est augmenté du nombre de caractères pour les balises HTML de formatage du texte).
50
51
52
53
54 Ajouter le code JS suivant :
55
56
57 {{code language="js" language="js"}}
58 if (document.getElementById('CHS_EDITOR'))
59 // Test que la balise TEXTAREA existe dans la page avant de créer l'éditeur
60 CKEDITOR.replace('CHS_EDITOR');
61 {{/code}}
62
63
64 Ce code est à placer soit :
65 - dans une balise SCRIPT après la balise [[adelia:entryfield>>url:http://adeliaentryfield]],
66 - dans une fonction de callback sur l'événement onload.
67
68 Lorsque l'objet Adélia CHS_EDITOR n'est pas manipulé dans un contexte d'événement Ajax, il n'y a rien d'autre à faire pour lier l'objet Adélia CHS_EDITOR à l'objet graphique CKEditor :
69 - lorsque l'éditeur se crée, il fixe son contenu avec le contenu de la balise CHS_EDITOR : cette balise est alors rendue invisible ([[display:none;visibility:hidden>>url:http://displaynone;visibilityhidden]]),
70 - lorsque l'utilisateur saisi du texte dans l'éditeur, celui-ci met à jour automatiquement la balise CHS_EDITOR.
71 (((
72 == Manipulation de CHS_EDITOR dans le code L4G ==
73 )))
74
75 La valeur de CHS_EDITOR contient le texte saisi par l'utilisateur (mise en page en HTML). Par exemple, chaque retour chariot saisi est transformé en interne par une balise P.
76 Note : Dans le cas de la balise P, un retour chariot est ajouté en tête de la balise.... Il est possible de le supprimer dans la configuration de l'éditeur.
77
78 Cas des propriétés ACTIVITE / LECTURE_SEULE : Avec la version 3.3.1, il n'est pas possible de rendre inactif / read only l'éditeur (pas d'API Javascript disponible)
79
80 Cas de la méthode METTRE_FOCUS : Il faut exécuter le code JS suivant :
81
82
83 {{code language="js" language="js"}}
84 CKEDITOR.instances.CHS_EDITOR.focus()
85 {{/code}}
86
87 (((
88 == Modification de l'interface de l'éditeur ==
89 )))
90
91 Par défaut, l'éditeur est crée avec :
92 - un certain look & feel,
93 - un certain nombre de barres d'outils (fonctionnalités de mise en page du texte saisi),
94 - une hauteur par défaut,
95 - une largeur égale à la largeur de son contenant,
96 - la possibilité en retailler sa dimension via drag/drop de son coin bas droit,
97 - la langue de l'interface.
98
99 Il est possible de configurer tous ces paramètres. Plusieurs techniques de configuration sont possibles (configuration dans la page Adélia ou dans un fichier JS externe : [[http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations>>url:http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations]]).
100
101 Pour une configuration dans la page Adélia, remplacer :
102
103
104 {{code language="js" language="js"}}
105 CKEDITOR.replace('CHS_EDITOR');
106 {{/code}}
107
108
109 par :
110
111
112 {{code language="js" language="js"}}
113 CKEDITOR.replace('CHS_EDITOR', {
114 attr1: valeur1,
115 attr2: valeur2
116 });
117 {{/code}}
118
119
120
121 ou attr1, attr2, etc. sont des attributs de configuration.
122
123 __**Look & feel (skin) :**__ 3 sont disponibles :
124 - kama (par defaut),
125 - office2003,
126 - v2.
127
128 Exemple :
129
130
131 {{code language="js" language="js"}}
132 CKEDITOR.replace('CHS_EDITOR', {
133 skin: 'office2003'
134 });
135 {{/code}}
136
137
138 __**Barre d'outils (toolbar) :**__ 2 types sont disponibles :
139 - Basic : nombre de fonctionnalités de mise en page limités
140 - Full : toutes les fonctionnalités de mise en page offertes (par défaut)
141
142 Exemple :
143
144
145 {{code language="js" language="js"}}
146 CKEDITOR.replace('CHS_EDITOR', {
147 toolbar: 'Basic'
148 });
149 {{/code}}
150
151
152 Dans le cas de l'utilisation du mode 'Full' il est possible de supprimer des fonctionnalités (donc des boutons dans les barres d'outils) :
153
154
155 {{code language="js" language="js"}}
156 CKEDITOR.replace('CHS_EDITOR', {
157 toolbar: 'Full',
158 toolbar_Full :
159 [
160 ['Source','-','Save','NewPage','Preview','-','Templates'],
161 ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
162 ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
163 ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
164 '/',
165 ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
166 ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
167 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
168 ['Link','Unlink','Anchor'],
169 ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
170 '/',
171 ['Styles','Format','Font','FontSize'],
172 ['TextColor','BGColor'],
173 ['Maximize', 'ShowBlocks','-','About']
174 ]
175 });
176 {{/code}}
177
178
179 Supprimer les fonctionnalités non nécessaires.
180
181 __**Hauteur et largeur (height & width) :**__
182
183
184 {{code language="js" language="js"}}
185 CKEDITOR.replace('CHS_EDITOR', {
186 height : '300px',
187 width:'500px'
188 });
189 {{/code}}
190
191
192 __**Retaillage (resize_enabled) :**__ Par défaut, il est possible de retailler l'éditeur.
193
194
195 {{code language="js" language="js"}}
196 CKEDITOR.replace('CHS_EDITOR', {
197 resize_enabled:false
198 });
199 {{/code}}
200
201
202
203 __**La langue de l'interface (language) :** __Par défaut, la langue de l'éditeur s'adapte à la langue du navigateur.
204 Attention : Par langue du navigateur on entend langue de l'OS de la machine et pas langue de navigation.
205 Pour que la langue de l'éditeur soit la langue de navigation il faut configurer l'éditeur comme cela :
206
207
208
209 {{code language="js" language="js"}}
210 CKEDITOR.replace('CHS_EDITOR', {
211 language:AWS.AWSGLOBALS.AWSRESOURCES_LANG
212 });
213
214 {{/code}}
215
216 (((
217 ==
218 Manipulation de CHS_EDITOR dans un contexte AJAX ==
219 )))
220
221 __**Fixer une valeur à CHS_EDITOR :**__ Il faut exécuter le code JS suivant
222
223
224 {{code language="js" language="js"}}
225 CKEDITOR.instances.CHS_EDITOR.setData(document.getElementById('CHS_EDITOR').value).
226
227 {{/code}}
228
229
230 Par exemple, mettre ce code dans une balise condition CND_EDITOR_SET_VALUE et faire :
231
232
233 {{code language="js" language="js"}}
234 CHS_EDITOR = 'mon texte' 
235 CND_EDITOR_SET_VALUE = *VRAI
236 {{/code}}
237
238
239
240
241 __**Fixer la visibilité à CHS_EDITOR :**__ Lorsque l'on rend invisible CHS_EDITOR ou que l'on fixe à *FAUX une balise condition contenant CHS_EDITOR alors la balise TEXTAREA est détruite. Il faut libérer les ressources prise par l'éditeur en exécutant le code JS suivant :
242
243
244 {{code language="js" language="js"}}
245 if (CKEDITOR.instances.CHS_EDITOR)
246 CKEDITOR.remove(CKEDITOR.instances.CHS_EDITOR);
247
248 {{/code}}
249
250
251 Lorsque l'on rend visible CHS_EDITOR, la balise TEXTAREA est recrée et il faut recréer l'éditeur en exécutant le code JS suivant :
252
253
254 {{code language="js" language="js"}}
255 CKEDITOR.replace('CHS_EDITOR', { attr1:valeur1, attr2:valeur2 });
256 {{/code}}
257
258 (((
259 == (% style="line-height: 1.5;" %)Articles connexes(%%) ==
260 )))
261
262 Les articles connexes apparaissent ici en fonction des étiquettes que vous avez sélectionnées. Cliquez pour modifier la macro et ajouter ou modifier des étiquettes.
263
264 {{liveData sort="doc.date:desc" source="liveTable" properties="doc.title,doc.date,doc.author" description="Recently updated" limit="5" filters="tag=web" sourceParameters="translationPrefix=platform.index."}}{{/liveData}}
265