|
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...
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
[