Discussion :

[Javascript-User]

Bonjour, j'essaie de faire une barre d'outils avec des boutons qui permettent d'écrire du texte dans un textarea, lorsqu'on clique sur un bouton, cela affiche des balises .

Mon problème est lorsque l'on clique sur les boutons, le code s'affiche en bas de page... Comment peut-on y remédier pour que le code s'écrive où le pointeur est positionné ?

PS : Je n'ai pas de bonne base en javascript, j'en ai seulement besoin pour un éditeur de texte..

Voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<script language="JavaScript" type="text/javascript">
 
function AddText(startTag,defaultText,endTag) 
{
   with(document.poster)
   {
      if (text.createTextRange) 
      {
         var text;
         text.focus(text.caretPos);
         text.caretPos = document.selection.createRange().duplicate();
         if(text.caretPos.text.length>0)
         {
 
            var sel = text.caretPos.text;
            var fin = '';
            while(sel.substring(sel.length-1, sel.length)==' ')
            {
               sel = sel.substring(0, sel.length-1)
               fin += ' ';
            }
            text.caretPos.text = startTag + sel + endTag + fin;
         }
         else
            text.caretPos.text = startTag+defaultText+endTag;
      }
      else text.value += startTag+defaultText+endTag;
   }
}
</script>

Merci d'avance !!

Bonne soirée

[Bovino]

Salut.

Bon, tout d'abord, à titre personnel, je déconseilles absolument l'utilisation de with pour une raison assez simple : dans le corps du with, JavaScript va essayer d'attribuer l'argument du with avec chaque instruction, le problème est que si l'on reprend ton exemple, que va-t-il se passer d'après toi si tu invoques une propriété / méthode qui soit commune à window et document.poster ?
Je te conseilles donc plutôt si tu tiens absolument à ne pas répéter document.posteur (ce qui se justifie tout à fait si tu fais souvent référence à cet objet) de stocker cet objet dans une variable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var ref = document.posteur;

comme ça, tu sais exactement à quel objet tu fais référence en appelant des propriétés ou méthodes.

Bref, concernant ton problème, c'est un grand classique. Tu appelles certainement les fonctions de ta barre d'outils sur le onclick des boutons associés. Le problème, c'est que le onclick donne le focus à ce bouton, donc le texte sélectionné perd le focus et n'est donc plus sélectionné
La solution est de passer par l'événement onmousedown, qui devra systématiquement renvoyer false pour que le texte garde le focus et reste sélectionné !

[Javascript-User]

Merci de votre conseil, ainsi que de votre aide !!

J'utilise ceci pour ma page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
echo '<form name="poster" method="post" action="?page='.$page.'&a=save">';
 
//MENU |
 
echo"
 
<a href=\"javascript:AddText('= Titre =','','');\" title=\"Grand titre\"><img src=\"$img_menu/h1.png\"></a>  
<a href=\"javascript:AddText('== Titre ==','','');\" title=\"Titre moyen\"><img src=\"$img_menu/h2.png\"></a>  
<a href=\"javascript:AddText('=== Titre ===','','');\" title=\"Petit titre\"><img src=\"$img_menu/h3.png\"></a>  
";
 
include("./System/script.html");
 
echo"\n<textarea rows=\"20\" cols=\"80\" name=\"text\" wrap=\"virtual\" onmouseover=\"this.focus();\" id='text'>$data</textarea>\n";
	echo '<p><input type="submit" value="Enregistrer" class="button" /></p>';
	echo "\n</form>\n";
}

J'utilise la fonction "AddText", je dois la remplacer par onmousedown ?

Puis, modifier dans mon script "function AddText(startTag,defaultText,endTag) " par function onmousedown (startTag,defaultText,endTag) ?

Merci d'avance, ça me fait plaisir de comprendre le javascript !
J'utilise surtout le PHP

[Javascript-User]

D'accord, excusez-moi pour le PHP

Donc pour le html, j'obtiens ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<a href="#" onmousedown="AddText('= Titre =','','');return false" title="Grand titre"><img src="$img_menu/h1.png"></a>
 
<textarea rows="20" cols="80" name="text" wrap="virtual" onmouseover="this.focus();" id='text'>$data</textarea>

L'évènement onmouseover, doit être remplacé par onmousedown dans mon code html pour le textarea ?

Pourriez-vous m'aider pour le "bidouillage" de mon script en javascript ?

Merci d'avance !

Bonne soirée

[Bovino]

Non, normalement, tu devrais juste avoir à faire les modifications indiquées dans mon message précédent.

[Javascript-User]

D'accord, mais je ne vois pas ce que je dois modifier dans mon script...
Faut-il modifier le comportement du "focus" ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
         text.focus(text.caretPos);

Merci d'avance

[Bovino]

Non, normalement, tu devrais juste avoir à faire les modifications indiquées dans mon message précédent.