Introduction
Afin de pouvoir modifier le contenu d’un champs de saisi en utilisant des fonctions de mise en page avancées (gras, italique, souligné, couleurs, …), on pourra utiliser une bibliothèque Javascript externe.
Dans l’exemple suivant, nous utiliserons la bibliothèque tinyMCE (http://www.tinymce.com).
Prérequis et installation
Afin de faire fonctionner de manière exhaustive l’objet RichEdit, il faudra récupérer le fichier suivant sur le site de téléchargement de l’objet TinyMCE (http://www.tinymce.com/download/download.php ) :
- tinymce_3.4.6.zip,
L’archive devra être dézipée puis son contenu sera copié dans le dossier tiny_mce de l’application web.
Remarque
La version 3.4.6 est la dernière version au jour de rédaction de ce document, il se peut que de nouvelles versions aient vu le jour entre temps.
En-tête de page
Placer les 5 fichiers récupérés dans un dossier planning à la racine du site web.
Insérer en en-tête de page (entre les balises <head> et </head>) les liens d'inclusion suivants :
<head> ... <!-- Ajout de la bibbliothèque javascript “tinymce” --> <script type='text/javascript' src='../tiny_mce/tiny_mce.js'></script> ... </head>
Pour pouvoir afficher un éditeur, permettant par exemple de mettre à jour tous les champs de saisie Adelia de type textarea, on ajoutera également le script suivant à la suite du script d’inclusion :
<head>
...
<!-- Ajout de la bibbliothèque javascript “tinymce” -->
<script type='text/javascript' src='../tiny_mce/tiny_mce.js'></script>
<!-- Gestion avec tinymce de tous les champs de type "textareas" -->
<script type="text/javascript" >
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script >
...
</head>
Remarque
On pourra changer les options pour que l’éditeur ne s’applique que sur un des champs de saisi particulier.
On pourra également changer les options pour avoir beaucoup plus d’options de mise en page. Pour cela, consulter la documentation de paramétrage de l’objet TinyMCE à l’adresse suivante : http://www.tinymce.com/wiki.php/Configuration
Affichage
Afin d’utiliser TinyMCE dans une page web Adelia, il suffira d’insérer un champs de saisie Adelia de type Mutltiligne. Ceci aura pour effet de créer un objet final de type textarea sur lequel s’appliquera par défaut l’objet TinyMCE.
Attention
La valeur du champs de saisie Adelia mis en forme par TinyMCE ne sera récupérée par défaut que sur un événement non ajax. Par défaut, si un événement de type ajax est utilisé, alors le champs de saisi récupéré aura la valeur initiale et non pas la valeur modifiée via TinyMCE . Pour récupérer correctement le champs de saisie à l’aide d’un événément de type ajax, voir le paragraphe suivant.
TinyMCE et Ajax
Afin de pouvoir récupérer la valeur d’un champs de saisie mis en forme par TinyMCE à l’aide d’un événement de type ajax, il faudra procéder aux modifications suivants :
Dans l’entête de la page (entre les balise <head> et </head>), ajouter le script suivant :
<head>
...
<script type="text/javascript" >
function editeur_contenu(monElement)
{
var monContenu = tinyMCE.get(monElement);
document.getElementById(monElement).value = monContenu.getContent();
}
</script >
...
</head>
Sur l’objet avec lequel on déclenche l’événement de type ajax, modifier le code de l’attribut onclick de la façon suivante :
<adelia:button >
<input type="button"
name="BTN_TEXTE"
id="BTN_TEXTE"
value="Texte ?"
onclick="editeur_contenu('ZZ_TEXTE');::ADELIA_EVT(:AJAX,:ASYNC,:COMP=1)" />
</adelia:button>
On ajoute donc l’appel de la fonction editeur_contenu avant le déclenchement de l’événement ajax, en lui passant en paramètre le nom de l’objet champs de saisie dont on veut récupérer la valeur.