Entourer un texte par des balises dans un textarea a la maniere d'un bbcode

**kilian67** · 16/05/2009, 16h52

Salut, je cherche a entourer une phrase sélectionner dans un champ de formualire, un peu comme un bbcode et pour cela j'ai un champ textarea

Code :

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

<textarea name="textarea" rows="3" cols="50"></textarea>

Ainsi qu'un bouton

Code :

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

<INPUT TYPE="BUTTON" ID="I_BTN43" NAME="I_BTN41" VALUE="TEST" title="Mets des balises ** devant et après la phrase sélectionné" onclick="Fct_Btn43(value)" >

Et un code javascript qui me permet de faire ce que je veut

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
function Insert_Tag( where_, tagdeb_, tagfin_){
  var Obj = document.getElementById( where_);
  if( Obj){
    Obj.focus();
    if(typeof Obj.selectionStart != 'undefined'){
      //-- Position du curseur
      var PosDeb = Obj.selectionStart;
      var PosFin = Obj.selectionEnd;
      //-- Recup. des Chaines
      var Chaine  = Obj.value;
      var szAvant = Chaine.substring( 0 , PosDeb);
      var szApres = Chaine.substring( PosFin, Obj.textLength );
      //-- Recup. texte selectionne
      var szSelect = Chaine.substring( PosDeb, PosFin);
      //-- Insertion des tags
      Obj.value = szAvant + tagdeb_ + szSelect + tagfin_ + szApres;
      //-- Replace le curseur
      PosDeb = szAvant.length + tagdeb_.length +szSelect.length;
      PosFin = PosDeb;
      Obj.setSelectionRange(  PosDeb, PosFin);
      //-- Replace le Focus
      Obj.focus();
    }
    else{ // IE and consort
      var Decal;
      //-- Recup. de la selection
      var Chaine   = document.selection.createRange();
      var szSelect = Chaine.text;
      Chaine.text  = tagdeb_ + szSelect + tagfin_;
      Chaine = document.selection.createRange();
      //-- Replace le curseur avant balise fin
      if( szSelect.length > 0){
        //-- Le curseur est en debut de chaine
        Decal = tagdeb_.length + szSelect.length;
        //-(*)- Supprime les retours Chariot
        Decal -= Get_NbrCR( szSelect);
      }
      else{
        //-- Le curseur est en fin de chaine
        Decal = -tagfin_.length;
      }
      //-- Deplace le curseur
      Chaine.move('character', Decal);
      Chaine.collapse();
      Chaine.select();
    }
  }
}
//-----------------------
 
 
function Fct_Btn43(value){
  var szTag ="";
  szTag = document.getElementById('I_BTN43').value;
  Insert_Tag('message', "["+ value +"]", "["+ value +"]");
}

Tous fonctionne pour ce que je veux faire ! Mais j'ai tout de même deux problèmes

Lorsque j'ai dépasser le nombre de ligne visible dans le champ de formulaire par exemple 5 lignes et que je fait appel au bouton après avoir sélectionner le dernier mot, le curseur revient tout en haut du champ alors que je souhaiterai qu'il reste en bas
Je souhaiterai que le bouton ai le nom TEST et que lorsque je clic dessus c'est [**] qui apparait, par exemple si je sélectionne le mot essai dans l'état actuel le script générera [TEST]essai[TEST] et je voudrai [**]essai[**]

Voila j'espère avoir été assez explicite et merci par avance

**danielhagnoul** · 16/05/2009, 19h53

Bonsoir.

Code :

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

1
2
3
4
 
function Fct_Btn43(){
    Insert_Tag('message', "[**]", "[**]");
}

**kilian67** · 16/05/2009, 21h58

Merci de cette réponse, mais en fait j'avais déjà pensé à cela et j'ai oublier de préciser que ce bouton en question pourrai être présent plusieurs fois pour un même formulaire et pas avec la même valeur.

C'est à dire qu'un bouton X devrai afficher [**]texte[**] et un bouton Y afficherai [##]texte[##]

**danielhagnoul** · 16/05/2009, 22h58

Bonsoir.

Code :

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

1
2
3
4
5
6
7
 
        function Fct_Btn43(value){
            //Pour trouver le numéro de l'attribut balise j'ai du me servir de Firebug
            //console.log(value);
 
            Insert_Tag('message', "[" + value + "]", "[" + value + "]");
        }

Code :

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

1
2
3
 
        <input id="I_BTN43" type="button" name="I_BTN41" value="TEST" balise="**" title="Mets des balises ** devant et après la phrase sélectionné" onclick="Fct_Btn43(document.getElementById('I_BTN43').attributes[3].nodeValue);" /><br /><br />
        <textarea id="message" name="textarea" rows="3" cols="50"></textarea>

Mais cela ne marche pas avec IE8 car c'est alors l'attribut n° 5 !

BINGO !

On peut faire :

Code :

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

1
2
 
onclick="Fct_Btn43(document.getElementById('I_BTN43').attributes['balise'].nodeValue);"

Mais, IE8 trouve qu'il y a une erreur dans la fonction Insert_Tag() !

**kilian67** · 17/05/2009, 11h05

Merci danielhagnoul cela fonctionne pour l'ajout des balises, et pour mon second problème est-ce que tu as une solution ?

Envoyé par kilian67

Lorsque j'ai dépasser le nombre de ligne visible dans le champ de formulaire par exemple 5 lignes et que je fait appel au bouton après avoir sélectionner le dernier mot, le curseur revient tout en haut du champ alors que je souhaiterai qu'il reste en bas

**danielhagnoul** · 17/05/2009, 23h04

Bonsoir.

Après quelques heures de travail, principalement à cause d'Internet Explorer et de la nécessité de nombreux cycles essai-erreur sur IE8 et F3, voici le résultat :

1) j'ai modifié Insert_Tag() pour qu'il ne fasse plus appel à une méthode externe, méthode que vous ne m'aviez pas communiquée, appel qui causais une erreur dans IE ;

2) cette méthode fonctionne, mais elle a beaucoup de failles. Voir les commentaires dans le code ;

3) j'ai donc développé une nouvelle approche, mais comme je suis beaucoup plus à l'aise avec jQuery quand javascript brut, c'est en jQuery ; mais vous pouvez facilement inclure ce code et vous en servir sans connaître le jQuery à la condition impérative que les <button> ou <input> aient la class ajouBalise et les attributs startTag et endTag

Ce code est bien entendu totalement libre de droit, mais j'apprécierais que vous conserviez la mention de l'auteur, car je compte l'utiliser. Je pense qu'il est original, malgré une bonne recherche avec Google je n'ai pas trouvé son équivalent, beaucoup de questions, de discussions et de bouts de code sur le sujet, mais rien qui ne soit sans failles évidentes.

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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #999999;
            font-size:0.8em;
        }
        .ajoutBalise {
            margin-top:12px;
            margin-left:12px;
        }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
 
        //modifié, il y avait un appel à une méthode externe !
        function Insert_Tag( where_, tagdeb_, tagfin_){
          var Obj = document.getElementById( where_);
          if( Obj){
            Obj.focus();
            if(typeof Obj.selectionStart != 'undefined'){
              //-- Position du curseur
              var PosDeb = Obj.selectionStart;
              var PosFin = Obj.selectionEnd;
              //-- Recup. des Chaines
              var Chaine  = Obj.value;
              var szAvant = Chaine.substring( 0 , PosDeb);
              var szApres = Chaine.substring( PosFin, Obj.textLength );
              //-- Recup. texte selectionne
              var szSelect = Chaine.substring( PosDeb, PosFin);
              //-- Insertion des tags
              Obj.value = szAvant + tagdeb_ + szSelect + tagfin_ + szApres;
              //-- Replace le curseur
              PosDeb = szAvant.length + tagdeb_.length +szSelect.length;
              PosFin = PosDeb;
              Obj.setSelectionRange(  PosDeb, PosFin);
              //-- Replace le Focus
              Obj.focus();
            }
            else{ // IE and consort
              var Decal;
              //-- Recup. de la selection
              var Chaine   = document.selection.createRange();
              var szSelect = Chaine.text;
              Chaine.text  = tagdeb_ + szSelect + tagfin_;
              Chaine = document.selection.createRange();
              //-- Replace le curseur avant balise fin
              if( szSelect.length > 0){
                //-- Le curseur est en debut de chaine
                Decal = tagdeb_.length + szSelect.length;
                //-(*)- Supprime les retours Chariot
                Decal -= szSelect.length; //modifié, il y avait un appel à une méthode externe !
              }
              else{
                //-- Le curseur est en fin de chaine
                Decal = -tagfin_.length;
              }
              //-- Deplace le curseur
              Chaine.move('character', Decal);
              Chaine.collapse();
              Chaine.select();
            }
          }
        }
 
        $.fn.textAreaSelectedText = function() {
            //Author : Daniel Hagnoul, 16 mai 2009.
 
            var s = ""; //renvoie une chaine vide par défaut
            var startPos = -1; //renvoie -1 pour une chaine vide
            var endPos = -1; //renvoie -1 pour une chaine vide
            var browser = -1; //renvoie -1 pour une chaine vide ; 0 pour Internet Explorer et 1 pour Firefox
 
            if (this[0].tagName == "TEXTAREA") {
                //on est maintenant certain que this[0] est bien un textarea
 
                if (document.selection) {
                    //Internet Explorer
 
                    s = document.selection.createRange().text;
 
                    if (s.length > 0) {
                        //il faut s'assurer que la sélection est dans le textarea !
                        startPos = this.val().indexOf(s);
 
                        if (startPos == -1) {
                            s = "";
                        } else {
                            endPos = startPos + s.length;
                            browser = 0;
                        }
                    }
 
                } else if (this[0].selectionStart != "undefined") {
                    //Firefox
 
                    //Firefox renvoie toujours une valeur, même si la sélection n'est pas dans this !
                    startPos = this[0].selectionStart;
                    endPos = this[0].selectionEnd;
 
                    //si les valeurs sont égales la sélection n'est pas dans le textarea !
                    if (startPos == endPos) {
                        startPos = -1;
                        endPos = -1;
                    } else {
                        s = this.val().substring(startPos, endPos);
                        browser = 1;
                    }
                }
            }
 
            return [s, startPos, endPos, browser];
        }
 
        $(document).ready(function(){
 
            $(".ajoutBalise").click(function(){
                //Author : Daniel Hagnoul, 16 mai 2009.
 
                var results = $("#textArea").textAreaSelectedText();
 
                if (results[1] != -1) {
                    //la sélection n'est pas vide et elle se trouve dans un textarea
 
                    //Pour tester l'ancienne méthode
                    //Insert_Tag("textArea", $(this).attr("startTag"), $(this).attr("endTag"));
 
                    var debut = $("#textArea").val().slice(0, results[1]);
                    var fin = $("#textArea").val().slice(results[2]);
                    $("#textArea").val(debut + $(this).attr("startTag") + results[0] + $(this).attr("endTag") + fin);
 
                    if (results[3] == 0) {
                        var s = document.selection.createRange();
                        var pos = $("#textArea").val().length;
                        s.move('character', pos);
                        s.collapse();
                        s.select();
                    }
                }
 
                return false;
            });
 
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <p>Un texte sélectionnable pour tester textAreaSelectedText()</p>
        <div style="margin:12px;">
            <textarea id="textArea" style="width:400px; height:200px;">Un texte pour le test</textarea>
            <br />
            <button class="ajoutBalise" type="button" startTag="[**]" endTag="[++]">Test 1</button>
            <button class="ajoutBalise" type="button" startTag="[--]" endTag="[++]">Test 2</button>
            <button class="ajoutBalise" type="button" startTag="[€€]" endTag="[++]">Test 3</button>
            <input class="ajoutBalise" type="button" startTag="[$$]" endTag="[++]" value="Test 4" />
        </div>
    </div>
</body>
</html>

**kilian67** · 18/05/2009, 16h17

Merci pour ce script qui fonctionne, mais lorsque le nombre de ligne dépasse le champs et lorsque que je sélectionne un texte à la fin et que je clique sur un bouton je me retrouve en haut du textarea et je souhaiterai que le curseur reste a l'emplacement ou le texte a été selectionner !

**danielhagnoul** · 19/05/2009, 01h27

Bonsoir.

Voici une nouvelle version, il y avait un énorme bug sous Internet Explorer

!

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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #999999;
            font-size:0.8em;
        }
        .ajoutBalise { /* Cette classe est indispensable, mais elle peut être vide ! */
            margin-top:12px;
            margin-left:12px;
        }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $.fn.textAreaSelectedText = function() {
            //Author : Daniel Hagnoul, 16 mai 2009. v1.0.0
            //Modified 18 mai 2009 [bug in Internet Explorer] v1.1.0
            //Modified 19 mai 2009 [use range.parentElement()] v1.2.0
 
            var s = ""; //renvoie une chaine vide par défaut
 
            if (arguments.length != 0) return s;
 
            if (this[0].tagName == "TEXTAREA") {
                //on est maintenant certain que this[0] est bien un textarea
 
                if (document.selection) {
                    //Internet Explorer
 
                    var range = document.selection.createRange();
                    s = range.text;
 
                    if (s.length > 0) {
                        var node = range.parentElement();
 
                        if (node.nodeName != "TEXTAREA") {
                            s = "";
                        }
                    }
 
                } else if (this[0].selectionStart != "undefined") {
                    //Firefox
 
                    //Firefox renvoie toujours une valeur, même si la sélection n'est pas dans this !
                    var startPos = this[0].selectionStart;
                    var endPos = this[0].selectionEnd;
 
                    //si les valeurs sont égales la sélection n'est pas dans le textarea !
                    if (startPos != endPos) {
                        s = this.val().substring(startPos, endPos);
                    }                    
                }
            }
 
            return s;
        }
 
        $.fn.textAreaTagSelectedText = function(startTag, endTag, moveCursor) {
            //Author : Daniel Hagnoul, 16 mai 2009. v1.0.0
            //Modified 18 mai 2009 [bug in Internet Explorer] v1.1.0
            //Modified 19 mai 2009 [use range.parentElement()] v1.2.0
 
            var s = ""; //renvoie une chaine vide par défaut
 
            if (arguments.length != 3) return s;
 
            for (var i = 0; i < arguments.length; ++i) {
                if (arguments[i] == "undefined") return s;
            }
 
            if (this[0].tagName == "TEXTAREA") {
                //on est maintenant certain que this[0] est bien un textarea
 
                if (document.selection) {
                    //Internet Explorer
 
                    var range = document.selection.createRange();
                    s = range.text;
 
                    if (s.length > 0) {
                        var node = range.parentElement();
 
                        if (node.nodeName != "TEXTAREA") {
                            s = "";
                        } else if ((startTag.length > 0) && (endTag.length > 0)) {
                            range.text = startTag + s + endTag;
 
                            /* Ajustement de la position du curseur */
                            if (moveCursor == false) {
                                //le curseur reste a l'emplacement ou le texte a été selectionner
                                range = document.selection.createRange();
                                var pos = startTag.length + s.length + endTag.length;
                                range.moveStart('character', pos);
                                range.collapse();
                                range.select();
                            } else if (moveCursor == true) {
                                //le curseur va à la fin du texte
                                this.select();                        
                                range = document.selection.createRange();
                                var pos = this.val().length;
                                range.moveStart('character', pos);
                                range.collapse();
                                range.select();
                            }
                        }
                    }
 
                } else if (this[0].selectionStart != "undefined") {
                    //Firefox
 
                    //Firefox renvoie toujours une valeur, même si la sélection n'est pas dans this !
                    var startPos = this[0].selectionStart;
                    var endPos = this[0].selectionEnd;
 
                    //si les valeurs sont égales la sélection n'est pas dans le textarea !
                    if (startPos != endPos) {
                        s = this.val().slice(startPos, endPos);
 
                        if ((startTag.length > 0) && (endTag.length > 0)) {
                            var scrollValue = this.scrollTop();
                            var debut = this.val().slice(0, startPos);
                            var fin = this.val().slice(endPos);
 
                            this.val(debut + startTag + s + endTag + fin);
 
                            /* Ajustement de la position du curseur */
                            if (moveCursor == false) {
                                //le curseur reste a l'emplacement ou le texte a été selectionner
                                var pos = debut.length + startTag.length + s.length + endTag.length;
                                this[0].selectionStart = pos;
                                this[0].selectionEnd = pos;
                                this.scrollTop(scrollValue);
                                this.focus();
                            } else if (moveCursor == true) {
                                //le curseur va à la fin du texte
                                this.select();
                                var pos = this.val().length;
                                this[0].selectionStart = pos;
                                this[0].selectionEnd = pos;                            
                                this.scrollTop(this.height());
                                this.focus();
                            }
                        }
                    }                    
                }
            }
 
            return s;
        }
 
        $(document).ready(function(){
 
            $(".ajoutBalise").click(function(){
 
                //var s = $("#textArea").textAreaSelectedText();
 
                //var s = $("#textArea").textAreaTagSelectedText($(this).attr("startTag"), $(this).attr("endTag"), true);
 
                $("#textArea").textAreaTagSelectedText($(this).attr("startTag"), $(this).attr("endTag"), false);
 
                return false;
            });
 
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <p>Un texte sélectionable pour test</p>
        <div style="margin:12px;">
            <textarea id="textArea" style="width:400px; height:200px;"> La JM Corporate University est une Business School, Haute Institution de Commerce et de Management implantée au cœur de la capitale européenne, située en périphérie, à Louvain-la-Neuve, dans un parc boisé de six hectares qui lui confère un rayonnement particulier. La mission de la JMCU Business School consiste à former des Managers responsables, ouverts à la connaissance et à la découverte des autres, rapidement opérationnels, dans un monde globalisé en perpétuelle évolution. Par cette mission, la JMCU entend, par un positionnement offensif, se placer comme une Business School Européenne de Commerce et de Management combinant exigence académique, expériences professionnelles et ouverture internationale, véhiculant aux diplômés des valeurs fondées sur l’audace, l’ouverture, l’humilité et l’éthique.</textarea>
            <br />
            <button class="ajoutBalise" type="button" startTag="[**]" endTag="[++]">Test 1</button>
            <button class="ajoutBalise" type="button" startTag="[--]" endTag="[++]">Test 2</button>
            <button class="ajoutBalise" type="button" startTag="[€€]" endTag="[++]">Test 3</button>
            <input class="ajoutBalise" type="button" startTag="[$$]" endTag="[++]" value="Test 4" />
        </div>
    </div>
</body>
</html>

On peut soit laisser le curseur en position (moveCursor == false), soit l'envoyer à la fin du texte (moveCursor == true).

**kilian67** · 21/05/2009, 11h26

Merci pour cette ressource, seule elle fonctionne parfaitement mais malheureusement je n'arrive pas a l'intégrer à l'endroit voulu car une fois en place plus rien ne fonctionne !

Mon textarea ressemble a cela à l'origine

Code :

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

<textarea name="message" id="message" rows="15" cols="76" tabindex="3" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" class="inputbox"></textarea>

Encore merci d'avoir passer du temps a cela

**danielhagnoul** · 21/05/2009, 22h05

Bonsoir.

N'auriez-vous pas oublié l'appel au framework jQuery :

Code :

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

1
2
 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

[Vendredi 2 h] Juste avant de me coucher, et pensant toujours à votre message, je viens de me rappeler que vous avez changé l'id du textarea en message, il faut donc changer l'appel comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function(){
 
    $(".ajoutBalise").click(function(){
 
        $("#message").textAreaTagSelectedText($(this).attr("startTag"), $(this).attr("endTag"), false);
 
        return false;
    });
 
});

**kilian67** · 22/05/2009, 10h00

Super boulot danielhagnoul et merci ça fonctionne mieux comme ça j'avais bien fait appel a jQuery mais je n'avais pas changer l'id du textarea.

J'ai quelques petites questions si tu le permets,

j'ai remarquer que ton script n'inscris rien quand aucune chaine de caractère n'est détecter, qu'est ce qui vérifie cela ?
Peut-on par exemple faire en sorte que les tags ne s'affiche que s'il y a au moins 5 caractères de sélectionner (sans message d'avertissement au cas ou le nombre de caractère n'est pas atteint mais simplement que rien ne s'affiche) ?
Dans la même optique peut-on inscrire les tags s'il n'y a aucun caractères de sélectionner a l'endroit ou pointe le curseur ?

Cela dit si tu as un site web personnel je vais faire un lien vers celui-ci pour peu que tu me le donne

....... et qu'il ne traite pas du piratage

**danielhagnoul** · 22/05/2009, 12h07

Bonjour.

Les réponses sont dans le code sous forme de commentaires.

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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #999999;
            font-size:0.8em;
        }
        .ajoutBalise { /* Cette classe est indispensable, mais elle peut être vide ! */
            margin-top:12px;
            margin-left:12px;
        }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $.fn.textAreaTagSelectedText = function(startTag, endTag, minTagLength, moveCursor) {
            //Author : Daniel Hagnoul, 16 mai 2009. v1.0.0
            //Modified 18 mai 2009 [bug in Internet Explorer] v1.1.0
            //Modified 19 mai 2009 [use range.parentElement()] v1.2.0
            //Modified 21 mai 2009 [use scrollValue = this.scrollTop(); for F3] v1.2.1
            //Modified 22 mai 2009 [add minTagLength] v1.2.2
 
            var s = ""; //renvoie une chaine vide par défaut
 
            if (arguments.length != 4) return s;
 
            for (var i = 0; i < arguments.length; ++i) {
                if (arguments[i] == "undefined") return s;
            }
 
            if ((startTag.length < minTagLength) || (endTag.length < minTagLength)) return s;
 
            if (this[0].tagName != "TEXTAREA") return s;
                //on est maintenant certain que this[0] est bien un textarea
 
            if (document.selection) {
                //Internet Explorer
 
                var range = document.selection.createRange();
                s = range.text;
 
                if (s.length > 0) {
                    var node = range.parentElement();
 
                    if (node.nodeName != "TEXTAREA") {
                        s = "";
                    } else if ((startTag.length > 0) && (endTag.length > 0)) {
                        range.text = startTag + s + endTag;
 
                        /* Ajustement de la position du curseur */
                        if (moveCursor == false) {
                            //le curseur reste a l'emplacement ou le texte a été selectionner
                            range = document.selection.createRange();
                            var pos = startTag.length + s.length + endTag.length;
                            range.moveStart('character', pos);
                            range.collapse();
                            range.select();
                        } else if (moveCursor == true) {
                            //le curseur va à la fin du texte
                            this.select();                        
                            range = document.selection.createRange();
                            var pos = this.val().length;
                            range.moveStart('character', pos);
                            range.collapse();
                            range.select();
                        }
                    }
                }
 
            } else if (this[0].selectionStart != "undefined") {
                //Firefox
 
                //Firefox renvoie toujours une valeur, même si la sélection n'est pas dans this !
                var startPos = this[0].selectionStart;
                var endPos = this[0].selectionEnd;
 
                //si les valeurs sont égales la sélection n'est pas dans le textarea !
                if (startPos != endPos) {
                    s = this.val().slice(startPos, endPos);
 
                    if ((startTag.length > 0) && (endTag.length > 0)) {
                        var scrollValue = this.scrollTop();
                        var debut = this.val().slice(0, startPos);
                        var fin = this.val().slice(endPos);
 
                        this.val(debut + startTag + s + endTag + fin);
 
                        /* Ajustement de la position du curseur */
                        if (moveCursor == false) {
                            //le curseur reste a l'emplacement ou le texte a été selectionner
                            var pos = debut.length + startTag.length + s.length + endTag.length;
                            this[0].selectionStart = pos;
                            this[0].selectionEnd = pos;
                            this.scrollTop(scrollValue);
                            this.focus();
                        } else if (moveCursor == true) {
                            //le curseur va à la fin du texte
                            this.select();
                            var pos = this.val().length;
                            this[0].selectionStart = pos;
                            this[0].selectionEnd = pos;                            
                            this.scrollTop(this.height());
                            this.focus();
                        }
                    }
                }                    
            }
 
            return s;
        }
 
        $(document).ready(function(){
            var minTagLength = 5;
 
            $(".ajoutBalise").click(function(){
                            $("#message").textAreaTagSelectedText($(this).attr("startTag"), $(this).attr("endTag"), minTagLength, false);
 
                return false;
            });
 
        });
    </script>
</head>
<body>
    <div id="conteneur">
<pre style="font-family:'Times New Roman', Times, serif; font-size:14px; color:#000000;">
J'ai quelques petites questions si tu le permets,
 
1. j'ai remarquer que ton script n'inscris rien quand aucune chaine de caractère n'est détecter, qu'est ce qui vérifie cela ?
 
    La fonction renvoie toujours une chaine vide par défaut.
 
    Pour IE :
        s = range.text; //s est égal au texte sélectionné, où qu'il se trouve dans le document html
 
        if (s.length > 0) { //si s = "" renvoie une chaine vide par le return final
            var node = range.parentElement(); //si s n'est pas vide, test si le conteneur est le textarea
 
            if (node.nodeName != "TEXTAREA") {
                s = ""; //ce n'est pas dans le textarea, renvoie une chaine vide par le return final
 
    Pour F :
        //Firefox renvoie toujours une valeur, même si la sélection n'est pas dans this (this == le textarea) !
        var startPos = this[0].selectionStart; //la position du début de la sélection dans le textarea
        var endPos = this[0].selectionEnd; //la position de la fin de la sélection dans le textarea
 
        //si les valeurs sont égales la sélection n'est pas dans le textarea !
        if (startPos != endPos) {
            s = this.val().slice(startPos, endPos);
            //la sélection dans le textarea n'est pas nulle
            //this.val() sélectionne tout le texte du textarea
            //la fonction javascript slice(debut, fin) donne le texte sélectionné.
 
2. Peut-on par exemple faire en sorte que les tags ne s'affiche que s'il y a au moins 5 caractères de sélectionner (sans message mais simplement que rien ne s'affiche) ?
    Cette version, elle utilise : var minTagLength = 5;
 
3. Dans la même optique peut-on inscrire les tags s'il n'y a aucun caractères de sélectionner a l'endroit ou pointe le curseur ?
    Pas avec cette méthode !
    À priori, il faudrait développer quelque chose qui se base sur la position du pointeur, bonjour les problèmes d'adaptation aux différents navigateurs.
 
Cela dit si tu as un site web personnel je vais faire un lien vers celui-ci pour peu que tu me le donne ;) ....... et qu'il ne traite pas du piratage :aie:
    Je n'ai pas de site personnel, mais j'ai créé et je m'occupe, bénévolement, de quatre sites internet.
    Trois n'ont qu'une audience belge, voire plus locale encore.
    Mais www.jmcu.net, JM Corporate University, (rassure-toi ce n'est pas un site qui fait l'apologie du piratage) est destiné à une audience internationale.
    Il commence à être connu dans plusieurs pays, mais si tu pouvais le référencer pour lui donner un coup de pouce ce serait très gentil. 
</pre>
        <p>Un texte sélectionable pour test</p>
        <p>Seul le bouton &quot;Test 4&quot; à des tags de longueur 5.</p>
        <div style="margin:12px;">
            <textarea id="message" style="width:400px; height:200px;"> La JM Corporate University est une Business School, Haute Institution de Commerce et de Management implantée au cœur de la capitale européenne, située en périphérie, à Louvain-la-Neuve, dans un parc boisé de six hectares qui lui confère un rayonnement particulier. La mission de la JMCU Business School consiste à former des Managers responsables, ouverts à la connaissance et à la découverte des autres, rapidement opérationnels, dans un monde globalisé en perpétuelle évolution. Par cette mission, la JMCU entend, par un positionnement offensif, se placer comme une Business School Européenne de Commerce et de Management combinant exigence académique, expériences professionnelles et ouverture internationale, véhiculant aux diplômés des valeurs fondées sur l’audace, l’ouverture, l’humilité et l’éthique.</textarea>
            <br />
            <button class="ajoutBalise" type="button" startTag="[**]" endTag="[++]">Test 1</button>
            <button class="ajoutBalise" type="button" startTag="[--]" endTag="[++]">Test 2</button>
            <button class="ajoutBalise" type="button" startTag="[€€]" endTag="[++]">Test 3</button>
            <input class="ajoutBalise" type="button" startTag="[$$$]" endTag="[+++]" value="Test 4" />
        </div>
    </div>
</body>
</html>

**kilian67** · 22/05/2009, 15h05

Et bien mille fois merci pour ton aide qui m'a été précieuse, je compte utiliser ta source comme moyen de modération sur mon site.

Le seul truc un minima gênant pour moi est que parfois il ne faudrait pas de texte entre les tags, mais bon a moins de trouver l'équivalent sans tags mais uniquement du texte, je vais donc tenter de m'adapter a ton script qui reflète grandement mes besoins.

Pour le lien vers http://www.jmcu.net/ tu le trouveras ici

**tagadamail** · 22/05/2009, 17h59

Salut a tous,
j'étais a la recherche d'un tuto pour faire un éditeur de texte sur une page en php, quand après de longue recherche je fini par atterrir ici.

Comme faut pas réinventer la roue, que j'y connais rien en java script et que Daniel propose son script ben je l'ai mis sur ma page et après des petits réglages c'est absolument impeccable.

Alors Merci Daniel.

J'aurais juste une petite question, comment puis je rajouter un champs "parcourir" qui me rajouterais une balise pour afficher une image mais qui en même temps la transférerais cette image sur le serveur au moment de l'envoi du formulaire ?

A oui je siat c'est les noobs c'est P....ble quand sa a une idée derrière la tête !!!

- Tagada -