Barre d'outils en javascript

Version imprimable

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:

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 :D

27/04/2010, 21h08
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:

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� :mrgreen:
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� !

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

J'utilise ceci pour ma page
Code:

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

:fleche: http://javascript.developpez.com/faq...taxe#pseudoUrl :mrgreen:
Code:

1 2 3 <a href=\"#\" onmousedown=\"AddText('= Titre =','','');return false\" title=\"Grand titre\"><img src=\"$img_menu/h1.png\"></a> <a href=\"#\" onmousedown=\"AddText('== Titre ==','','');return false\" title=\"Titre moyen\"><img src=\"$img_menu/h2.png\"></a> <a href=\"#\" onmousedown==\"AddText('=== Titre ===','','');return false\" title=\"Petit titre\"><img src=\"$img_menu/h3.png\"></a>
EDIT : Et merci d'�viter de poster le code PHP qui n'a que peu d'int�r�t en g�n�ral mais le code HTML g�n�r�.

D'accord, excusez-moi pour le PHP :(

Donc pour le html, j'obtiens ceci :
Code:

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

27/04/2010, 21h51
Bovino

Non, normalement, tu devrais juste avoir � faire les modifications indiqu�es dans mon message pr�c�dent.
27/04/2010, 22h03
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:

1 2 text.focus(text.caretPos);
Merci d'avance :)
27/04/2010, 22h38
Bovino

Citation:

Envoy� par Bovino

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