Intégration d'un editeur de texte riche (Rich Text Editor ou RTE) dans une page Adélia Web
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 :
- http://blog.webdistortion.com/2008/03/09/9-of-the-best-rich-text-editors-reviewed/
- http://woork.blogspot.com/2009/02/best-rich-text-editors-ready-to-use-in.html
- http://www.commentcamarche.net/faq/10000-les-editeurs-de-texte-formate-rich-text-editors
Pour cet exemple, on utilisera un des plus connus : CKEditor (http://ckeditor.com/). Ce produit est disponible sous une tripe licence GPL, LGPL et MPL.
La version utilisée est la 3.3.1.
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.
Intégration du module Javascript dans la page Adélia Web
Télécharger le fichier ckeditor_3.3.1.zip à la page http://ckeditor.com/download et le décompresser à la racine de votre application Web.
Dans la page Web, inclure le fichier Javascript ckeditor.js à l'aide de cette balise
à placer dans la balise HEAD.
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.
Intégration à une zone Adélia Web
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 :
- 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,
- prévoir une longueur suffisante pour le type ALPHA car :
- à ma connaissance, il n'est pas possible de fixer le nombre maximal de caractères saisis dans l'éditeur,
- 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).
Ajouter le code JS suivant :
// Test que la balise TEXTAREA existe dans la page avant de créer l'éditeur
CKEDITOR.replace('CHS_EDITOR');
Ce code est à placer soit :
- dans une balise SCRIPT après la balise adelia:entryfield,
- dans une fonction de callback sur l'événement onload.
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 :
- 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),
- lorsque l'utilisateur saisi du texte dans l'éditeur, celui-ci met à jour automatiquement la balise CHS_EDITOR.
Manipulation de CHS_EDITOR dans le code L4G
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.
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.
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)
Cas de la méthode METTRE_FOCUS : Il faut exécuter le code JS suivant :
Modification de l'interface de l'éditeur
Par défaut, l'éditeur est crée avec :
- un certain look & feel,
- un certain nombre de barres d'outils (fonctionnalités de mise en page du texte saisi),
- une hauteur par défaut,
- une largeur égale à la largeur de son contenant,
- la possibilité en retailler sa dimension via drag/drop de son coin bas droit,
- la langue de l'interface.
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).
Pour une configuration dans la page Adélia, remplacer :
par :
attr1: valeur1,
attr2: valeur2
});
ou attr1, attr2, etc. sont des attributs de configuration.
Look & feel (skin) : 3 sont disponibles :
- kama (par defaut),
- office2003,
- v2.
Exemple :
skin: 'office2003'
});
Barre d'outils (toolbar) : 2 types sont disponibles :
- Basic : nombre de fonctionnalités de mise en page limités
- Full : toutes les fonctionnalités de mise en page offertes (par défaut)
Exemple :
toolbar: 'Basic'
});
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) :
toolbar: 'Full',
toolbar_Full :
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
]
});
Supprimer les fonctionnalités non nécessaires.
Hauteur et largeur (height & width) :
height : '300px',
width:'500px'
});
Retaillage (resize_enabled) : Par défaut, il est possible de retailler l'éditeur.
resize_enabled:false
});
La langue de l'interface (language) : Par défaut, la langue de l'éditeur s'adapte à la langue du navigateur.
Attention : Par langue du navigateur on entend langue de l'OS de la machine et pas langue de navigation.
Pour que la langue de l'éditeur soit la langue de navigation il faut configurer l'éditeur comme cela :
language:AWS.AWSGLOBALS.AWSRESOURCES_LANG
});
Manipulation de CHS_EDITOR dans un contexte AJAX
Fixer une valeur à CHS_EDITOR : Il faut exécuter le code JS suivant
Par exemple, mettre ce code dans une balise condition CND_EDITOR_SET_VALUE et faire :
CND_EDITOR_SET_VALUE = *VRAI
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 :
CKEDITOR.remove(CKEDITOR.instances.CHS_EDITOR);
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 :
Articles connexes
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.