innerHTML et balises <bouton>

**Joe-La-Boule** · 25/06/2008, 21h12

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** · 25/06/2008, 21h31

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

**Joe-La-Boule** · 25/06/2008, 21h35

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

**Bovino** · 25/06/2008, 21h47

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** · 25/06/2008, 22h11

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** · 25/06/2008, 22h17

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...

**Joe-La-Boule** · 25/06/2008, 22h23

oui mais justement
c'est entre chaque simple quote que vient se placer :
onClick="insertion(' [.b] ','[/b]')"

**Bovino** · 25/06/2008, 22h40

OK, j'avais pas regardé en détail...
Bon la fonction insertion n'est pas présente dans ton code, mais j'imagine qu'elle est censée insérer le premier argument au début de la sélection et le 2e argument à la fin...
C'est à dire dans ce cas :

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

rien au début et rien à la fin...
Si c'est ça, comment tu sais si ça marche ou pas ?

**Joe-La-Boule** · 26/06/2008, 11h18

non bon prenons un autre exemple :

Code :

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

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

Ça ne fait rien pourtant dans mon fichier create_news.php :

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
<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
}
 
?>

la fonction devrait effectuer les instructions, ce quelle ne fait pas.
Merci beaucoup quand même

**Bovino** · 26/06/2008, 11h30

Code :

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

onClick="insertion('[blablabla]','[/bblablabla]')"

C'est très bien, mais dans ton code javascript, il n'y a pas de fonction insertion...
Ce serait pas plutôt :

Code :

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

onClick="bbcode('[blablabla]','[/bblablabla]')"

**E.Bzz** · 26/06/2008, 11h38

Bonjour,

Envoyé par Joe-La-Boule

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** · 26/06/2008, 12h17

Merci

**Joe-La-Boule** · 26/06/2008, 12h26

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...