Novice creation d'un textarea

**pek.plus.ultra59** · 29/04/2010, 11h56

Bonjour,

Je débute en javascript et je rencontre quelques soucis. Pour vous c'est surement un jeux d'enfant mais pour moi une grande étape à franchir.

Je suis en train de concevoir un éditeur de texte textarea en ligne, comme ceux utilisé pour poster mais j'ai un souci avec le bouton d'une liste numérotée.

La liste ne s'incrémente pas.

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
 
   <a href="javascript:var cpt=list(cpt);"><img src="images/texte/text_list_numbers.png"></a>
 
function AddText(startTag,defaultText,endTag) 
{
   with(document.poster)
   {
      if (message.createTextRange) 
      {
         var text;
         message.focus(message.caretPos);
         message.caretPos = document.selection.createRange().duplicate();
         if(message.caretPos.text.length>0)
         {
            //gère les espace de fin de sélection. Un double-click sélectionne le mot
            //+ un espace qu'on ne souhaite pas forcément...
            var sel = message.caretPos.text;
            var fin = '';
            while(sel.substring(sel.length-1, sel.length)==' ')
            {
               sel = sel.substring(0, sel.length-1)
               fin += ' ';
            }
            message.caretPos.text = startTag + sel + endTag + fin;
         }
         else
            message.caretPos.text = startTag+defaultText+endTag;
      }
      else message.value += startTag+defaultText+endTag;
   }
}
 
 function list(cpt)
 {
 
 	cpt=cpt+1;
 	AddText("list"cpt,"","/list")
 	return cpt;
 
 }

Je suis vraiment un grand novice. Pouvez vous m'aidez please?

Merci

**yakiniku** · 29/04/2010, 14h38

Salut,

essaie en corrigeant :

Code :

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

1
2
 
<span onclick="cpt=list(cpt);"><img src="images/texte/text_list_numbers.png"></span>

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
 
<script type='text/javascript'>
	var cpt = 0;
function AddText(startTag,defaultText,endTag) 
{
     with(document.poster)
   {
      if (message.createTextRange) 
      {
         var text;
         message.focus(message.caretPos);
         message.caretPos = document.selection.createRange().duplicate();
         if(message.caretPos.text.length>0)
         {
            //gère les espace de fin de sélection. Un double-click sélectionne le mot
            //+ un espace qu'on ne souhaite pas forcément...
            var sel = message.caretPos.text;
            var fin = '';
            while(sel.substring(sel.length-1, sel.length)==' ')
            {
               sel = sel.substring(0, sel.length-1)
               fin += ' ';
            }
            message.caretPos.text = startTag + sel + endTag + fin;
         }
         else
            message.caretPos.text = startTag+defaultText+endTag;
      }
      else message.value += startTag+defaultText+endTag;
   }
}
 
 function list(cpt)
 {
 
 	cpt=cpt+1;
 	AddText("list"+cpt,"","/list");
 	return cpt;
 
 }
 </script>

**pek.plus.ultra59** · 29/04/2010, 15h51

Envoyé par yakiniku

Salut,

essaie en corrigeant :

Code :

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

1
2
 
<span onclick="cpt=list(cpt);"><img src="images/texte/text_list_numbers.png"></span>

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
 
<script type='text/javascript'>
	var cpt = 0;
function AddText(startTag,defaultText,endTag) 
{
     with(document.poster)
   {
      if (message.createTextRange) 
      {
         var text;
         message.focus(message.caretPos);
         message.caretPos = document.selection.createRange().duplicate();
         if(message.caretPos.text.length>0)
         {
            //gère les espace de fin de sélection. Un double-click sélectionne le mot
            //+ un espace qu'on ne souhaite pas forcément...
            var sel = message.caretPos.text;
            var fin = '';
            while(sel.substring(sel.length-1, sel.length)==' ')
            {
               sel = sel.substring(0, sel.length-1)
               fin += ' ';
            }
            message.caretPos.text = startTag + sel + endTag + fin;
         }
         else
            message.caretPos.text = startTag+defaultText+endTag;
      }
      else message.value += startTag+defaultText+endTag;
   }
}
 
 function list(cpt)
 {
 
 	cpt=cpt+1;
 	AddText("list"+cpt,"","/list");
 	return cpt;
 
 }
 </script>

Haaa tu es un DIEUX, je savais bien que ca n'aurait pas été compliqué pour des pros

.
J'y étais presque, j'avais pensé à initialiser également cpt=0 mais je l'avais mis en haut de ma page dans une autre balise script. Ça me m'était une erreur.

**pek.plus.ultra59** · 29/04/2010, 16h00

Une autre petite question, pourquoi faut il ajouter un span au lieu de la balise <a>

**yakiniku** · 29/04/2010, 16h09

Personnellement je préfère utiliser les balises <a> pour les liens et les <span> (ou <div>) pour les autres besoins, mais ca n'engage que moi ^^

**pek.plus.ultra59** · 29/04/2010, 16h16

Je viens d'essayer avec la balise <a> mais le hic, c'est que ca m'ouvre une page blanche avec le résultat

J'aurais bien laissé la balise span, mais je dois avoir une bordure grise autour de mon icon et lorsque ma souris se positionne dessus je devrais avoir une petite main pour montrer que c'est un lien.

Tu as une solution stp?

**pek.plus.ultra59** · 29/04/2010, 16h29

C'est bon j'ai trouvé.

Code :

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

<a href="javascript:list();"><img src="images/texte/text_list_numbers.png"></a>

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
<script type='text/javascript'>
	var cpt = 0;
function AddText(startTag,defaultText,endTag) 
{
     with(document.poster)
   {
      if (message.createTextRange) 
      {
         var text;
         message.focus(message.caretPos);
         message.caretPos = document.selection.createRange().duplicate();
         if(message.caretPos.text.length>0)
         {
            //gère les espace de fin de sélection. Un double-click sélectionne le mot
            //+ un espace qu'on ne souhaite pas forcément...
            var sel = message.caretPos.text;
            var fin = '';
            while(sel.substring(sel.length-1, sel.length)==' ')
            {
               sel = sel.substring(0, sel.length-1)
               fin += ' ';
            }
            message.caretPos.text = startTag + sel + endTag + fin;
         }
         else
            message.caretPos.text = startTag+defaultText+endTag;
      }
      else message.value += startTag+defaultText+endTag;
   }
}
 
 function list()
 {
 
 	cpt=cpt+1;
 	AddText("list"+cpt,"","/list");
 
 }
 </script>

à mon avis, cpt doit etre ainsi déclaré comme variable globale.

**yakiniku** · 29/04/2010, 17h04

oui, elle est déclaré en globale, du coup c'est vrai que le "cpt=" ne servait pas à grand chose

Sinon, juste pour info, si tu veux changer le style de ton <span> il suffit de rajouter dans ton code HTML :

Code :

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

<span id="style_img" onclick="list(cpt);"><img src="images/texte/text_list_numbers.png"></span>

et dans ta page CSS :

Code :

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

1
2
3
4
5
6
 
#style_img
{
    pointer: cursor;
    border : 1px solid black;
}

Mais tu peux laisser le <a>, ca marche très bien aussi

**pek.plus.ultra59** · 03/05/2010, 09h13

Je te remercie de ton aide

Bonne journée

**pek.plus.ultra59** · 03/05/2010, 11h56

Encore une petite question,

Je suis en train de faire la partie prévisualisation, tout fonctionne à merveille sauf cette liste numéroté

car une fois le code remplie, je remplace les balises [liste1][liste2][liste3].....
par le code html (<ul><li> jjjjjj </li></ul>)

Mais comment puis je faire avec les numéro?

Voici mon code pour une liste normal et la numéroté.

Code :

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

1
2
3
 
   <a href="javascript:AddText('<list>','','</list>');"><img src="images/texte/text_list_bullets.png"></a>
   <a href="javascript:list();"><img src="images/texte/text_list_numbers.png"></a>

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
 
 function list()
 {
 	cpt=cpt+1;
 	AddText("<list"+cpt+">","","</list>");
 
 }
function preview(textareaId, previewDiv) {
	var field = textareaId.value;
	if (field) {
 
		field = field.replace(/&lt;list&gt;([\s\S]*?)&lt;\/list&gt;/g, '<ul><li>$1</li></ul>');
 
		for(i=1;i<cpt;i++){
			field = field.replace(/&lt;list+i+&gt;([\s\S]*?)&lt;\/list&gt;/g, '<ol><li>$1</li></ol>');
		}		
 
		document.getElementById(previewDiv).innerHTML = field;
	}
}

Apparemment ma syntaxe doit être mauvaise dans le field.replace pour ajouter le cpt.

Je souhaiterai récupérer également mon textarea dans un input pour l'envoyer lors de la validation de mon formulaire, est ce possible?

Merci

**defacta** · 04/05/2010, 02h43

Envoyé par pek.plus.ultra59

Encore une petite question,

Je suis en train de faire la partie prévisualisation, tout fonctionne à merveille sauf cette liste numéroté

car une fois le code remplie, je remplace les balises [liste1][liste2][liste3].....
par le code html (<ul><li> jjjjjj </li></ul>)

Mais comment puis je faire avec les numéro?

Voici mon code pour une liste normal et la numéroté.

Code :

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

1
2
3
 
   <a href="javascript:AddText('<list>','','</list>');"><img src="images/texte/text_list_bullets.png"></a>
   <a href="javascript:list();"><img src="images/texte/text_list_numbers.png"></a>

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
 
 function list()
 {
 	cpt=cpt+1;
 	AddText("<list"+cpt+">","","</list>");
 
 }
function preview(textareaId, previewDiv) {
	var field = textareaId.value;
	if (field) {
 
		field = field.replace(/&lt;list&gt;([\s\S]*?)&lt;\/list&gt;/g, '<ul><li>$1</li></ul>');
 
		for(i=1;i<cpt;i++){
			field = field.replace(/&lt;list+i+&gt;([\s\S]*?)&lt;\/list&gt;/g, '<ol><li>$1</li></ol>');
		}		
 
		document.getElementById(previewDiv).innerHTML = field;
	}
}

Apparemment ma syntaxe doit être mauvaise dans le field.replace pour ajouter le cpt.

Je souhaiterai récupérer également mon textarea dans un input pour l'envoyer lors de la validation de mon formulaire, est ce possible?

Merci

Je pense que c'est .value que tu cherches:

Code :

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

document.getElementById('InputID').value = document.getElementById('textAreaId').value ;

**pek.plus.ultra59** · 05/05/2010, 08h00

Envoyé par defacta

Je pense que c'est .value que tu cherches:

Code :

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

document.getElementById('InputID').value = document.getElementById('textAreaId').value ;

Merci defacta, je viens de tester et ca fonctionne avec :

Code :

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

document.getElementById('InputID').value = field;

Vous êtes tous des dieux

Novice creation d'un textarea

JavaScript

Discussions similaires

Partager

Partager