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.