passer une variable d'une fonction à une autre

Version imprimable

Bonjour,

J'ai un petit outil qui me permet de mettre en forme du texte dans un textearea d'un formulaire.

Cela fonctionne trés bien, tant que j'applique ces outils sur une zone déterminé. (gras, souligné, italique, saut de ligne.....
Seulement je souhaite pouvoir mettre en forme plusieurs textearea.
Le moyen le plus simple serait de recopier l'outils avec des appels de fonctions dont les variables changerais. Mais c'est trop lourd pour un formulaire comprennant une dizaine de champs.
Je partais du principe de faire un lien sur lequel on clique pour déterminé la zone dans laquelle on veut appliquer la mise en forme.
Mais bon je cale, je ne maitrise pas bien le passage de variable..
Si vous aviez une idée...
Merci de votre attention

VOICI LE CODE DE LA PAGE

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>outils</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
function insertion(repdeb, repfin, champ1) {	
 
/*Déclaration de la variable input. On lui indique quelle prend pour valeur le contenu
du champ de formulaire textarea qui à pour nom 'saisie'*/
 
var input = document.forms["form1"].elements[champ1];
 
 
 
input.focus();  
 
 
  if(typeof document.selection != 'undefined') {  
 
 
    var range = document.selection.createRange();
 
    var insText = range.text;
 
    range.text = repdeb + insText + repfin;
 
 
    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();
  }
 
  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) + repdeb + insText + repfin + input.value.substr(end);
 
    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;
  }
 
  else
  {
 
    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;
    }
 
    var insText = prompt("Veuillez entrer le texte à formater:");
    input.value = input.value.substr(0, pos) + repdeb + insText + repfin + input.value.substr(pos);
  }
}
 
 
 
function ecriture(champ1, affiche) {
 
	var des = document.forms["form1"].elements[champ1].value;			
	var res = document.getElementById(affiche).innerHTML=des;
}
 
 
//-->
</script>
</head>
<body>
  <input type="button" value="B" id="gras" onclick='insertion("<strong>", "</strong>","texte")' />
<input type="button" value="I" id="ital" onclick="insertion('<em>', '</em>','texte')" />
<input type="button" value="S" id="souli" onclick="insertion('<u>', '</u>', 'texte')" />
<input type="button" value="Retour Ligne" id="retourligne"  onclick="insertion('<br />', '', 'texte')" />
<input type="button" value="Voir" id="gras2"  onclick="ecriture('texte','regarde')" />
 
<p><a href="#" onclick="zone1('texte')">zone1</a> <a href="#">zone2 </a></p>
<p>
 
</p>
<p>&nbsp;</p>
<p>n&deg;1</p>
<form name="form1" id="form1" method="post" action="">
  <p>
    <textarea name="texte" cols="40" rows="5" id="texte"></textarea>
</p>
  <p>&nbsp;</p>
  <div id="regarde">Placez ici le contenu de id "regarde"</div>
  <p>&nbsp;  </p>
 
<p>n&deg;2</p>
 
  <p>
    <textarea name="texte2" cols="40" rows="5" id="texte2"></textarea>
  </p>
  <p>&nbsp;</p>
  <div id="regarde2">Placez ici le contenu de id "regarde2"</div>
  <p>&nbsp; </p>
</form>
<a href="#" onclick="zone1()">zone1</a>
<p>&nbsp;</p>
</body>
</html>

[edit]Balise ajouter par shwin, merci d'y penser [/edit] :wink:

Je crois que la programmation orientée objet t'aiderait beaucoup, à moins que je n'ais pas bien compris ce que tu veux.

Il suffirait d'écrire une classe contenant des méthodes qui sont tes fonctions ecriture et insertion par exemple. À partir de là, tu pourrais créer pour chaque textarea un objet correspondant à partir de cette classe.

Exemple :

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
// Classe :
function classeEdition(param1, param2, etc){
 
    // Méthode publique :
    this.insertion = function(parametres){
            // ... traitement ....
    }
 
    // Méthode publique :
    this.ecriture = function (parametres){
            // ... traitement ....
    }
 
 
    // Méthode privée :
    function fonctionBidon(){
           alert("Cette fonction ne peut être exécuter que par les"+
                 "autres fonctions et méthode de cette classe. Il est" +
                 "donc inutile de tenter d'y accéder en vous servant"+
                 "de l'objet instancié à partir de cette classe.") ;
 
    }
 
    this.bidon1 = "propriété publique" ;
 
    var bidon2 = "propriété privée" ;
 
    // ... traitements, création de propriétés ou d'autres méthodes
 
    return this ;
 
}
 
 
var maTxtAreaEditable1 = new classeEdition(parametre1, parametre2, etc) ;
var maTxtAreaEditable2 = new classeEdition(parametre3, parametre4, etc) ;

Ensuite, tu peux t'amuser avec les méthodes et propriétés publiques des objets :

Code:

1
2
maTxtAreaEditable1.insertion(parametre) ;
maTxtAreaEditable1.bidon1 = "je ne peux modifier que le contenu des propriétés publiques" ;

Je m'arrête ici. De toute manière, il existe de nombreuses références sur le Web à propos de la programmation orientée objet en JavaScript.

13/12/2005, 14h01
Psyion

Merci, c'est une piste que je vais bosser.
Ce que je veux c'est pouvoir avoir plusieur textearea et que je puisse mettre le texte en forme, car ensuite le tout va dans une base de donée.
Merci encore pour cette piste
Psyion
13/12/2005, 14h19
Claude Pelletier

Il existe déjà des frameworks pour faire ça (éditeurs de textareas en JavaScript). Une petite recherche dans Google te permettra de trouver rapidement une solution toute faite et optimisée. Par contre, le fait de développer ta propre solution t'amène à approfondir le langage, ce qui va grandement te profiter.
13/12/2005, 16h01
Psyion

Oui en effet il existe des solutions toutes faites.
Mais je préféres faire moi même mes outils. Je passe plus de temps, mais au moins c'est bénéfique pour l'apprentissage.
Merci encore pour ces solutions
Psyion