|
Dans ce second volet de notre tutoriel,
nous allons décrire les fonctions Javascript qui associeront
à l'évenement onClick, pour chaque bouton pressé,
les comportements correspondants (mise en gras du texte sélectionné,
mise en italique du texte sélectionné, transformation
en lien hypertexte du lien sélectionné.
Les deux premiers comportements peuvent être réunis
en une seule fonction Javascript que nous appellerons format,
et dont voici le code:
function format(f) {
var str = document.selection.createRange().text;
document.formulaire.texte.focus();
var sel = document.selection.createRange();
sel.text = "<" + f + ">" +
str + "</" + f + ">";
return;
}
Cette fonction utilise:
- l'élément document (la page web);
- les sous-éléments selection (et sa méthode
createRange() qui va permettre de récupérer
le texte sélectionné) et formulaire (le nom
de notre formulaire, défini par: <FORM
name="formulaire"...>);
- Les sous-sous éléments text (sous-élément
de selection.createRange()) et texte (sous-élement
de formulaire, représentant le nom de l'objet de formulaire
"champ multiligne" défini par <TEXTAREA
name="texte"...>); A ce dernier élément
on applique la méthode focus() pour caractériser
que la sélection doit être prise en compte en son sein.
Il reste alors à modifier le texte de la sélection
pour y inclure, avant et après, les balises <b>
et </b> ou <i> et </i> suivant
le bouton pressé. On passera donc "b" ou "i"
en paramètre de la fonction format().
Quant au comportement associé au troisième bouton,
il est programmé comme suit:
function lien() {
var str = document.selection.createRange().text;
document.formulaire.texte.focus();
var lien = prompt("URL:","http://");
if (lien != null) {
var sel = document.selection.createRange();
sel.text = "<a href=\""
+ lien + "\">" + str + "</a>";
}
return;
}
Là encore, on isole le texte sélectionné
au sein de l'objet "champ mutiligne" de notre formulaire,
puis on demande, par une alerte Javascript (fontion prompt())
à l'internaute de saisir une URL. Si celle-ci est effectivement
saisie, alors on modifie le texte de la sélection pour y
inclure les balises <a href="URL saisie">
et </a>.
En résumé, pour obtenir le résultat suivant
(rappel du premier volet):
Nous écrirons, outre le fichier CSS définit dans
la premier volet, et que nous appellerons barreoutils.css,
et le fichier Javascript qui contient les deux fonctions détaillées
ci-dessus, fichier que nous appellerons barreoutils.js:
<html>
<head>
<link rel="stylesheet" type="text/css" href="barreoutils.css">
<script language="Javascript" src="barreoutils.js"></script>
</head>
<body>
<form name="formulaire">
<center>
<table cellpadding="0" cellspacing="0"
border="2">
<tr>
<td>
<div
id="outils">
<img class="out" src="/exemples/css_barreoutils/bold.gif"
width="16"
height="16" align="middle"
onMouseOver="this.className='over';"
onMouseOut="this.className='out';"
onClick="format('b');">
<img class="out" src="/exemples/css_barreoutils/italic.gif"
width="16"
height="16" align="middle"
onMouseOver="this.className='over';"
onMouseOut="this.className='out';"
onClick="format('i');">
<img class="out" src="/exemples/css_barreoutils/link.gif"
width="32"
height="16" align="middle"
onMouseOver="this.className='over';"
onMouseOut="this.className='out';"
onClick="lien();">
</div>
<textarea
cols="30" rows="6" name="texte"></textarea>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
On peut étendre le principe énoncé ici en
rajoutant d'autres boutons permettant d'inclure d'autres balises,
jusqu'à réaliser un éditeur HTML complet. A
vos claviers...
|
Accueil
[