[JS] Insérer du texte au milieu d'un textarea |
Smileys, codes... pratique pour les forums |
|
 |
Internet Explorer uniquement. Ce n'est pas un éditeur html WYSIWYG en 20000 lignes de code ;-) mais la solution pour insérer du texte au milieu d'un textarea. Souvent dans les forums, y'a des boutons Gras, Italique... mais ça met du code à la fin du textarea, idem pour les smileys... voilà un truc qui sera apprécié par les visiteurs :-))
|
Il te faut :
- le code javascript suivant ;
- un formulaire, appelons-le poster ;
- un textarea, appelons-le message ;
- des liens ou icônes "Gras", "Italique", "Image".... et des smileys.
Le script !
| AddText.htm |  |  | |
| <html>
<head>
<title>Ajouter du texte au milieu d'un textarea</title>
</head>
<body>
<form name="poster"
onSubmit="alert('Script by iubito\nhttp://iubito.free.fr\niubito [at] asp-php [point] net');return false;">
<p>Mise en forme du texte :
<a href="javascript:AddText('[url]','','[/url]');">URL</a>
| <a href="javascript:AddText('[email]','','[/email]');">Email</a>
| <a href="javascript:AddText('[b]','','[/b]');">Gras</a>
| <a href="javascript:AddText('[i]','','[/i]');">Italique</a>
| <a href="javascript:AddText('[u]','','[/u]');">Souligné</a>...
<br>
Smileys :
<a href="javascript:AddText('',':)','');">Content</a>
| <a href="javascript:AddText('',':(','');">Pas content</a>
| <a href="javascript:AddText('','8o)','');">Faire le clown</a>
| <a href="javascript:AddText('',';-D','');">LOL</a>...
</p>
<script language="JavaScript" type="text/javascript">
/*function storeCaret(text)
{ // voided
}
*/
function AddText(startTag,defaultText,endTag)
{
with(document.poster)
{
if (message.createTextRange)
{
var text;
message.focus(message.caretPos);
message.caretPos = document.selection.createRange().duplicate();
if(message.caretPos.text.length>0)
{
//gère les espace de fin de sélection. Un double-click sélectionne le mot
//+ un espace qu'on ne souhaite pas forcément...
var sel = message.caretPos.text;
var fin = '';
while(sel.substring(sel.length-1, sel.length)==' ')
{
sel = sel.substring(0, sel.length-1)
fin += ' ';
}
message.caretPos.text = startTag + sel + endTag + fin;
}
else
message.caretPos.text = startTag+defaultText+endTag;
}
else message.value += startTag+defaultText+endTag;
}
}
</script>
<textarea
rows="8"
cols="30"
name="message"
wrap="virtual"
onmouseover="this.focus();">
Tape du texte ici,
fais une sélection puis clique sur un lien,
place ton curseur au beau milieu de ton texte,
clique sur un lien... éclate-toi bien !
</textarea><br>
<input type="submit" name="soumettre" value="envoyer">
</form>
</body>
</html> |
Dans le code, tu remarquera peut-être le onmouseover="this.focus();" sur le textarea, ça permet de mettre le curseur dans la zone dès qu'on survole, c'est bien pratique mais faut pas en abuser tout de même.
Démo !!
Plusieurs textarea ? Pas de problème !
On me l'a demandé plusieurs fois en quelques jours donc voici l'astuce ;-) (pas testé à fond donc si y'a des bugs e-mailez-moi!)
Le code fourni plus haut marche nikel avec un seul textarea.
Pour en gérer plusieurs, il faut modifier le code un p'tit peu en rajoutant un paramètre qui contient le nom du textarea.
La fonction storeCaret reste inchangée !
<script language="JavaScript" type="text/javascript">
function storeCaret(text)
{ // voided
}
function AddText(startTag,defaultText,endTag,nom_du_textarea)
{
if (nom_du_textarea.createTextRange)
{
var text;
nom_du_textarea.focus(nom_du_textarea.caretPos);
nom_du_textarea.caretPos = document.selection.createRange().duplicate();
if(nom_du_textarea.caretPos.text.length>0)
{
nom_du_textarea.caretPos.text = startTag + nom_du_textarea.caretPos.text + endTag;
}
else
{
nom_du_textarea.caretPos.text = startTag+defaultText+endTag;
}
}
else nom_du_textarea.value += startTag+defaultText+endTag;
}
</script>
|
Il faut mettre des boutons URL, Email... des smileys... pour chaque textarea (ou pour les plus malins gérer une variable en fonction du textarea où on a cliqué/entré du texte)
Dans notre exemple où le formulaire s'appelle "poster" et le textarea "message" :
<a href="javascript:AddText('[url]','URL','[/url]',document.poster.message);">URL</a>
....
|
iubito le
27/09/2004 (101 139 hits) |
|
|
Boutique |
Sites |
Bar |
Forum |
PhpBB |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Lettre
