Discussion :

[Joe-La-Boule]

Bonjour ! j'ai essayé de mettre au point pour mon site web un système d'insertion de texte dans un textarea via un bouton (enfin plusieurs selon les style de texte recherché ) et pour éviter d'utiliser des images, j'ai opté pour la solution des balises <bouton></bouton>.
Cependant, je n'y suis pas parvenu !
J'ai essayé d'utiliser des ressources trouvées sur internet, mais le problème c'est que les tutoriels que j'ai découvert utilise une balise <input type="button" /> pour le(s) bouton(s).
Vous avez une solution (sachant que je ne connais pas vraiment le javascript mais que je suis prêt à comprendre en détail le script que l'on me proposera car j'ai envie de progresser) ?

Je vous remercie d'avance, à bientôt

JLB

[Bovino]

Que peux-tu faire avec <input type="button" /> qui soit impossible avec <bouton></bouton> ???

[Joe-La-Boule]

l'événement insertion('','') ne s'effectue pas...

[Bovino]

C'est quoi l'événement insertion('','') ???
D'ici que je devine, t'as cas essayer de passer tes <button></button> en <input type="button" />...

[Joe-La-Boule]

je vais poster le 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<script>
function bbcode(debut, fin)
{
        var input = window.document.createNews.contenuNews;
        input.focus();
 
        if(typeof document.selection != 'undefined')
        {
                var range = document.selection.createRange();
                var insText = range.text;
                range.text = debut + insText + fin;
                range = document.selection.createRange();
                if (insText.length == 0)
                {
                        range.move('character', -fin.length);
                }
                else
                {
                        range.moveStart('character', debut.length + insText.length + fin.length);
                }
                range.select();
        }
 
        else if(typeof input.selectionStart != 'undefined')
        {
                var start = input.selectionStart;
                var end = input.selectionEnd;
                var insText = input.value.substring(start, end);
                input.value = input.value.substr(0, start) + debut + insText + fin + input.value.substr(end);
                var pos;
                if (insText.length == 0)
                {
                        pos = start + debut.length;
                }
                else
                {
                        pos = start + debut.length + insText.length + fin.length;
                }
                input.selectionStart = pos;
                input.selectionEnd = pos;
        }
        else
        {
                var pos;
                var re = new RegExp('^[0-9]{0,3}$');
                while(!re.test(pos))
                {
                        pos = prompt("insertion (0.." + input.value.length + "):", "0");
                }
                if(pos > input.value.length)
                {
                        pos = input.value.length;
                }
                var insText = prompt("Veuillez taper le texte");
                input.value = input.value.substr(0, pos) + debut + insText + fin + input.value.substr(pos);
        }
}
function smilies(img)
{
        window.document.formulaire.message.value += '' + img + '';
}
 
</script>
 
 
<?php
 
if(isset($_POST['valid']))
{
 
}
 
 
else
{
?>
	<center class="gros_titre">Géstion des news</center>
	<center><br />	
		<form name="formulaire" method="post" class="form" action="http://<?php echo $domain; ?>/index.php?p=adminNews&amp;do=newArticle">
			<label>Titre :</label><br /><input type="text" name="titreNews" style="text-align: center;" size="100"/><br /><br />
			<?php include("admin/news/taskbar.php"); ?><br /><br />
			<label>Contenu :</label><br /><textarea cols="100" name="saisie"></textarea><br /><br />
			<input type="button" value="Effacer tout" onClick="contenuNews.value=''"/>&nbsp;&nbsp;<input type="submit" name="valid" value="Poster" />
		</form>
	</center>
<?php
}
 
?>

et taskbar

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
32
33
34
35
36
37
38
39
40
41


<button title="Gras" type="button" name="gras" onClick="insertion('','')"><b>Gras</b></button>&nbsp;
<button title="Italique" type="button" name="italic"><i>Italique</i></button>&nbsp;
<button title="Souligné" type="button" name="souligne"><u>Souligné</u></button>&nbsp;
<button title="Barré" type="button" name="barre"><span  style="text-decoration: line-through;">Barré</span></button>&nbsp;
<button title="Clignotant (ne pas en abuser !/Ne marche pas sur Internet Explorer)" type="button" name="blink" style="text-decoration: blink;">Clignotant</button>&nbsp;
<button title="Insérer une image" type="button" name="img">Img</button>&nbsp;
<button title="Citer" type="button" name="quote">"Citation"</button>&nbsp;
<button title="Insérer un lien" type="button" name="link"><a href="#" style="font-size: 11px;">Lien</a></button>&nbsp;
<select name="font">
	<option selected="selected"  style="color: orange; font-weight: bold;">Police</option>
	<option style="font-family: Verdana;" onClick="contenuNews.value='<?php echo "[font name=verdana][/font]";?>'">Verdana</option>
	<option style="font-family: tahoma;">Tahoma</option>
	<option style="font-family: impact;">Impact</option>
	<option style="font-family: arial;">Arial</option>
	<option style="font-family: 'comic sans ms';">Comic Sans MS</option>
	<option style="font-family: 'arial black';">Arial Black</option>
	<option style="font-family: 'times new roman';">Times New Roman</option>
	<option style="font-family: 'courier new';">Courier New</option>
</select>
&nbsp;
<select name="size">
	<option selected="selected" style="color: orange; font-weight: bold;">Taille</option>
	<option style="font-size:9px;">9</option>
	<option style="font-size:10px;">10</option>
	<option style="font-size:11px;">11</option>
	<option style="font-size:12px;">12</option>
	<option style="font-size:13px;">13</option>
	<option style="font-size:14px;">14</option>
	<option style="font-size:15px;">15</option>
	<option style="font-size:16px;">16</option>
</select>

<br /><br />
<button title="Aligné à gauche" type="button" name="left"><img src="admin/news/taskbar/left.png" alt="left" /></button>
<button title="Justifié" type="button" name="left"><img src="admin/news/taskbar/justify.png" alt="justify" /></button>
<button title="Aligné à droite" type="button" name="left"><img src="admin/news/taskbar/right.png" alt="right" /></button>
<button title="Liste à puce" type="button" name="list"><img src="admin/news/taskbar/pucelist.gif" alt="list" /></button>
<button title="Insérer un smiley" type="button" name="smiley" style="padding-top: 3.5px;"><img src="admin/news/taskbar/smiley_icon.gif" alt="smileys" /></button>

[Bovino]

Code :

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

<button title="Gras" type="button" name="gras" onClick="insertion(',')">

Ca ne marche pas car tu avais mis deux quotes simples...

[E.Bzz]

Bonjour,

l'événement insertion('','') ne s'effectue pas...

Code :

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

insertion('\',\'')

Sinon, la balise <button></button> est dépréciée ...

A+

[Joe-La-Boule]

Merci

[Joe-La-Boule]

arf j'ai crié victoire trop vite :

Code :

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

<button title="Gras" type="button" name="gras" onClick="insertion('\',\'')"><b>Gras</b></button>&nbsp;

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script>
<!--
function insertion(repdeb, repfin) {
  var input = document.forms['formulaire'].elements['saisie'];
  input.focus();
  /* pour l'Explorer Internet */
  if(typeof document.selection != 'undefined') {
    /* Insertion du code de formatage */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = repdeb + insText + repfin;
    /* Ajustement de la position du curseur */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -repfin.length);
    } else {
      range.moveStart('character', repdeb.length + insText.length + repfin.length);
    }
    range.select();
  }
  /* pour navigateurs plus récents basés sur Gecko*/
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Insertion du code de formatage */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + repdeb + insText + repfin + input.value.substr(end);
    /* Ajustement de la position du curseur */
    var pos;
    if (insText.length == 0) {
      pos = start + repdeb.length;
    } else {
      pos = start + repdeb.length + insText.length + repfin.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* pour les autres navigateurs */
  else
  {
    /* requête de la position d'insertion */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("Insertion à la position (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Insertion du code de formatage */
    var insText = prompt("Veuillez entrer le texte à formater:");
    input.value = input.value.substr(0, pos) + repdeb + insText + repfin + input.value.substr(pos);
  }
}
//-->
</script>

il marque undefined...