innerHTML et balises <bouton>

Version imprimable

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

innerHTML et balises <bouton>

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

Que peux-tu faire avec <input type="button" /> qui soit impossible avec <bouton></bouton> ???
25/06/2008, 21h35
Joe-La-Boule

l'événement insertion('','') ne s'effectue pas...:)
25/06/2008, 21h47
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" />...

je vais poster le 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
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:

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>

25/06/2008, 22h17
Bovino

Code:

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

Ca ne marche pas car tu avais mis deux quotes simples...
25/06/2008, 22h23
Joe-La-Boule

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

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 :

Citation:

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 ?

non bon prenons un autre exemple :

Code:

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

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

26/06/2008, 11h30
Bovino

Code:

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:

onClick="bbcode('[blablabla]','[/bblablabla]')"
26/06/2008, 11h38
E.Bzz

Bonjour,

Citation:

Envoyé par Joe-La-Boule

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

Code:

insertion('\',\'')

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

A+
26/06/2008, 12h17
Joe-La-Boule

Merci :)

arf j'ai crié victoire trop vite :

Code:

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

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

26/06/2008, 12h35
E.Bzz

Citation:

Envoyé par Joe-La-Boule

il marque undefined...

8O On doit se débrouiller avec ça :?
26/06/2008, 12h36
Joe-La-Boule

il marque plus exactement :

Code:

[blabla]','[/bblabla]undefined

:)
26/06/2008, 13h14
Joe-La-Boule

Le problème est résolu ! merci à tous