Fonction dans la même balise qui ne fonctionne plus

**autran** · 20/11/2015, 19h19

Comme promis,
Voila ce que ça donne en 50 lignes.
Ça n'est qu'une ébauche car le double click ne fonctionne pas .....
Mais on peut sélectionner un texte et choisir sa couleur dans la belle palette.

j'ai tenté de garder ton idée générale pour que tu puisses l’intégrer dans ton appli finale

Code javascript :

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
<!DOCTYPE html ">
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript">
			function cree_palette() 
			{
				var coul=["#FFFFFF","#FFCCCC","#FFCC99","#FFFF99","#FFFFCC","#99FF99","#99FFFF","#CCFFFF","#CCCCFF","#FFCCFF","#CCCCCC","#FF6666","#FF9966","#FFFF66","#FFFF33","#66FF99","#33FFFF","#66FFFF","#9999FF","#FF99FF","#C0C0C0","#FF0000","#FF9900","#FFCC66","#FFFF00","#33FF33","#66CCCC","#33CCFF","#6666CC","#CC66CC","#999999","#CC0000","#FF6600","#FFCC33","#FFCC00","#33CC00","#00CCCC","#3366FF","#6633FF","#CC33CC","#666666","#990000","#CC6600","#CC9933","#999900","#009900","#339999","#3333FF","#6600CC","#993399","#333333","#660000","#993300","#996633","#666600","#006600","#336666","#000099","#333399","#663366","#000000","#330000","#663300","#663333","#333300","#003300","#003333","#000066","#330099","#330033"];
				var mydiv = document.getElementById("content");
				var table = document.createElement("table");
				table.style.border=1+"px solid black"
				table.cellspacing=0;    
				for (var i = 0; i < 7; i++) 
				{
					var row = table.insertRow(i);
					for (var col = 0; col < 10; col++)
					{
						var cell = row.insertCell(col);
						cell.style.border=1+"px solid black";
						cell.style.width=20+"px";
						cell.style.height=20+"px";
						cell.style.backgroundColor =coul[10 * i + col];
						cell.onclick = function()
						{
							texte_couleur(this.style.backgroundColor);
						}
					}
				}
				mydiv.appendChild(table);
			}
			function selectionne_text()
			{
				if (document.getElementById("selection"))
					document.getElementById("selection").id = "";
				var selection = window.getSelection().getRangeAt(0);
				var selectedText = selection.extractContents();
				var balise = document.createElement("span");
				balise.appendChild(selectedText);
				balise.id = "selection";
				selection.insertNode(balise);
			}
            function texte_couleur(coul) 
			{
				document.getElementById("selection").style.color = coul;
			}  			
		</script>
	</head> 
	<body>
		<div id="editeur" contenteditable="true" onclick="selectionne_text()">
			<p>tapez votre texte </p>
			<p>tapez UN AUTRE texte </p>  
		</div>
		<button onclick="cree_palette()"> texte de couleur </button>
		<div id="content"></div> 
	</body>
</html>

**patricktoulon** · 20/11/2015, 20h31

bonsoir autran
oui j'y avais penser aussi c'est la methode que j'utilise avec le bouton remouveformat et l'id"old" qui change a chaque click

seul inconveniant c'est que je suis obligé de fonctionner comme ca pour les fonts bold ,italic,etc0... car avec ta methode je ne peut pas atribué la balise avant de savoir sur quel bouton je vais cliqué

exemple je ne peut pas créer un "" si je veux changer la couleur par exemple

mais bon ca me derange pas je vais essaiyer de developper dans ce sens tout en span pourquoi pas

et peut etre pas !!!!!!!!

je peut tres bien créé une balise bidon du genre "<newb> pour le appendchild et l'ors du clik sur le bouton bold,italic,etc... changer le type de balise avec la meme methode du bouton removeformat

l'essentiel et de pouvoir garder la selection en memoire ou comme dans le cas present dans ton exemple le ID selection

merci pour la demo

**autran** · 21/11/2015, 09h45

Sinon tu as aussi la solution de faire comme sur DVP, un éditeur avec les balises apparentes.

Du coup, ton éditeur est une <textarea> et là tes sélections sont super faciles à gérer. Bien entendu tu pourrais à tout moment valider le formulaire pour avoir une prévisualisation.

**patricktoulon** · 21/11/2015, 10h05

re
Bonjour Autran

j'avais avant de commencer ce projet essayer de récupérer un editeur html(richtext) le tinyeditor ,le nice editor (c'estcelui que j'utilise en html depuis un moment deja)
il y a aussi le cross-broser

et certains effectivement fonctionnent avec un textarea mais je dois t'avouer que j'en pige pas une miette surtout que la plupart du temps les codes sont meme pas indenter et ca m'aide pas du tout

de plus comme je l'ai dis au debut certaines fonctions javascript créé un message d'erreur quand le script est dans un webbrowser dans un userform (vba excel) et ne fonctionnent pas correctement dans un HTA

pourquoi ces erreur dans ces elements et pas dans un fichier html

les composant webbrowser et les fichier HTA prennent les librairie natives windows et donc IE9 et non pas dans les librairie de la version de IE installée

je suis donc obligé de conjuguer avec cela

mon projet c'est bien ca créé un richtext pour mon application mail (CDO)vbaexcel) et le meme en HTA

notament une erreur que je n'arrive pas a corriger voir a eviter si ce n'est que ecrire la balise en dur dans le code html

c'est le appendchild sur le body

ceci fonctionne tres bien dans un fichier html

Code :

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

1
2
3
var mybody=document.body;
var mydiv=document.createElement("div");
mybody.appendchild(mydiv);

mais pas dans les composants précédement cités (erreur de gestion de la propriété)

**autran** · 21/11/2015, 10h18

Malheureusement, je ne pourrai pas t'aider sur la partie Microsoft

, car je travaille à la maison sur Linux. Je travaille sur Windows au boulot tout de même

Le code que je fournis n'est donc testé que sur Firefox.

Néanmoins si tu cherches un truc simple avec un <textarea> je dois pouvoir t'en filer un de moins de 50 lignes et correctement indenté (donc compréhensible).

**patricktoulon** · 21/11/2015, 10h23

re
et oui c'est un peu ca le soucis je travaille avec windows(7) IE ou chrome(tres rarement ) firefox je veux meme en entendre parler

pour l'exemple oui pourquoi pas je suis pret a recommencer du debut si il faut en meme temps j'apprends un peu un autre language ca me sort un peu de VB

**autran** · 21/11/2015, 10h34

OK je m'y colle.
J'ai dit que c'était pas dur alors rendez vous dans moins d'une heure
J'aime bien me mettre la pression tout seul.

**patricktoulon** · 21/11/2015, 10h37

re
bien venu au club j'ai promis la nouvelle version cdo2016 avant la fin de l'année je suis plus en pression j'ai deja les coques fissurés

et des fuites pârtout

**autran** · 21/11/2015, 11h31

Et voila
en 58 minutes et 58 lignes

Code javascript :

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
<!DOCTYPE html ">
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript">
			function initialise() 
			{
				var coul=["#FFFFFF","#FFCCCC","#FFCC99","#FFFF99","#FFFFCC","#99FF99","#99FFFF","#CCFFFF","#CCCCFF","#FFCCFF","#CCCCCC","#FF6666","#FF9966","#FFFF66","#FFFF33","#66FF99","#33FFFF","#66FFFF","#9999FF","#FF99FF","#C0C0C0","#FF0000","#FF9900","#FFCC66","#FFFF00","#33FF33","#66CCCC","#33CCFF","#6666CC","#CC66CC","#999999","#CC0000","#FF6600","#FFCC33","#FFCC00","#33CC00","#00CCCC","#3366FF","#6633FF","#CC33CC","#666666","#990000","#CC6600","#CC9933","#999900","#009900","#339999","#3333FF","#6600CC","#993399","#333333","#660000","#993300","#996633","#666600","#006600","#336666","#000099","#333399","#663366","#000000","#330000","#663300","#663333","#333300","#003300","#003333","#000066","#330099","#330033"];
				var mydiv = document.getElementById("content");
				var table = document.createElement("table");
				table.style.border=1+"px solid black"
				table.cellspacing=0;    
				for (var i = 0; i < 7; i++) 
				{
					var row = table.insertRow(i);
					for (var col = 0; col < 10; col++)
					{
						var cell = row.insertCell(col);
						cell.style.border=1+"px solid black";
						cell.style.width=20+"px";
						cell.style.height=20+"px";
						cell.style.backgroundColor =coul[10 * i + col];
						cell.onclick = function()
						{
							texte_couleur(this.style.backgroundColor);
						}
					}
				}
				mydiv.appendChild(table);
			}
			function selectionne_text(editor)
			{
				var start = document.getElementById("start");
				start.innerHTML = editor.selectionStart;
				var end = document.getElementById("end");
				end.innerHTML = editor.selectionEnd;
			}
            function texte_couleur(coul) 
			{
				var start = parseInt(document.getElementById("start").innerHTML);
				var end = parseInt(document.getElementById("end").innerHTML);
				var editeur = document.getElementById("editeur");
				var preSelection = editeur.value.substring(0, start);
				var selection = editeur.value.substring(start, end);
				var postSelection = editeur.value.substring(end);
				var newSelection = selection.fontcolor(coul);
				editeur.value = preSelection + newSelection + postSelection;
			}  			
		</script>
	</head> 
	<body>
		<textarea id="editeur" cols="150" rows="10" onselect="selectionne_text(this)">inserer votre code</textarea>
		<label id="start" hidden></label>
		<label id="end" hidden></label>
		<button onclick="initialise()"> texte de couleur </button>
		<div id="content"></div> 
	</body>
</html>

**patricktoulon** · 21/11/2015, 12h28

re

heu oui bon c'est pas ergonomique tout ca hein espéront que les utilisateur n'auront pas un roman a ecrire

celat dit ca me permet d'imaginer un peu comment les richtexts connus avec un texarea fonctionnent

on arrive a l'utilisation de regex a mon avis

je garde je vais examiner ca de plus pret

pour le moment je suis encore en train d'essayer de developpez tou en span en ayant les meme option que le dernier le plus aboutit avec les balises b,i,u

**patricktoulon** · 21/11/2015, 13h23

re
revoici ma fonction textecouleur
je n'arrive pas a trouver l'erreur qui est générée par texttwo

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
function texte_couleur(coul) 
   {
 
           var selection = selectionne_text();
    var selectedText = selection.extractContents();
 
    var couleur=coul.replace("pal","#");
 
    var bal=quelle_balise();
    var balname=bal.tagName;
    var res=(bal.tagName=="FONT");
 
    var texttwo=(bal.innertext == (selectedtext));
    alert(res+"-----"+balname+"----"+bal.innerText+"---"+texttwo);
 
 
 
 
 
    var balise = document.createElement("font");
    balise.color = couleur;
    balise.appendChild(selectedText);
    balise.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();}
 
       putID_old(this); 
                                                 }
 
    balise.onmouseup = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this);       
 
                                                 }
 
 
 
 
    selection.insertNode(balise);
 
 
    document.getElementById("PALETTE").style.visibility="hidden";   
     }

edit c'est bon j'ai trouvé c'etait encore les majuscule innerText

mais ca me dit toujours pas pourquoi quand le innertext de la balise est egal a selectedText ca me donne false

**patricktoulon** · 29/11/2015, 10h19

Bonjour Autran
je reviens apres quelques jours car j'ai eu une semaine de boulot intense
alors voila avec mon editeur sans textearea j'avais un soucis avec la couleur
en effet quand je selectionnais du texte de deux couleur pour le modifier ca ne fonctionnais pas
pourquoi?: parce que les balise ne se fermaient pas pourtant dans le cohtml elles etaient bien la mais entrecroisées
alors j'ai eu une idée une fois la balise appliquée remplacer le innerhtml par le innetext et la c'etait bon
de deux portion de texte de deux couleur j'iobbtenait bien 3 portions de texte de 3 couleur
probleme quand il y avais des caractere en bold,italic,soulignés,barré tout ca disparaissait
alors j'ai eu une idée
remplacer les "<>" des balise internes (enfants) b,i, u, s par un "." pour le depart et "*|" pour les fin de balises
ce qui me transforme

Code :

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

<font color=#ff0000>Bonjour <b>Autran</b></font>

en

Code :

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

<font color=#ff0000>Bonjour .b.Autran*|b*</font>

les balises deviennent ainsi du innertext puisque elles ne sont pas identifiées comme balises
une fois cela remplacé
on applique la balise
ensuite
on reprend la balise et on reremplace par des balises conformes
et c'est nikel l toutes les balises sont bien fermées et a leur place
pas besoins de passer par un regex
qu'en pense tu??? y a t il plus simple que ca ??? au niveau des replaces dans la fonction couleur texte
code editeur complet

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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
 
<html lang="fr">
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=10" />
<!-meta charset="UTF-8"-!>
  <style>
  #editeur
  {
   width:650px;
   height:500px;
   border:1px solid blue;
  }
 
 
  #ruban
  {
  /height:50px;/
  width:650px;
  display:block;
  border:1px solid green;
  }
 
 
 
</style>
 
 
<script type="text/javascript">
 
/*  INITIALISATION*/   
 
 
createpalette();
 
/*fin d ininitialisation*/
 
   function codes()
   {
    var divcode=document.getElementById("editeur");
    alert(divcode.innerHTML);
   }
 
 
 
   function putID_old(ELEM)
   {
     ELEM.id="old";                      
   }
 
   function supp_old()
   {
    var myelem=document.getElementById("old");
     myelem.id="";                      
   }
 
   function quelle_balise()
   {
   return document.selection.createRange().parentElement();
   }
   function selectionne_text()
   {
   return window.getSelection().getRangeAt(0);
   }   
 
 
                        function Backgtexte() 
   {
    var selection = selectionne_text();
    var selectedText = selection.extractContents();
 
 
    var balise = document.createElement("span");
    balise.style.backgroundColor = "yellow";
    balise.appendChild(selectedText);
    balise.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this); 
                                                 }
    selection.insertNode(balise);
 
}
 
 
 
 
                        function texteBiU(BiU) 
   {
    var selection = selectionne_text();
    var selectedText = selection.extractContents();
 
    var balise = document.createElement(BiU);
    balise.appendChild(selectedText);
    /*balise.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this);       
 
                                                 }*/
 
 
    balise.onmouseup = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this);       
 
                                                 }
 
 
    selection.insertNode(balise);
 
   }
 
 
                        function texte_couleur(coul) 
   {
 
           var selection = selectionne_text();
    var selectedText = selection.extractContents();
 
    var couleur=coul.replace("pal","#");
 
    var bal=quelle_balise();
    var balname=bal.tagName;
    var res=(bal.tagName=="FONT");
    var texttwo=(bal.innerText==selectedText);
    /*alert(res+"-----"+balname+"----"+bal.innerText+"---"+texttwo);*/
 
 
/*bal.color=couleur*/
 
 
 
    var balise = document.createElement("font");
    balise.color = couleur;
    balise.appendChild(selectedText);
 
                                    /*   sauvegarde des balises b,i u   on transforme les symboles <,> en . et / en | */
var str = balise.innerHTML;
var str= str.replace("<b>", ".b."); 
var str= str.replace("</b>", "*|b*"); 
var str= str.replace("<i>", ".i.");
var str= str.replace("</i>", "*|i*");
var str= str.replace("<u>", ".u.");
var str= str.replace("</u>", "*|u*");
var str= str.replace("<s>", ".s.");
var str= str.replace("</s>", "*|s*");
/* on applique le code obtenu dans le innerhtml de la balise */
balise.innerHTML=str;
balise.innerHTML=balise.innerText;/* on remplace le innerhtml par le innertext il n'y a plus de balises sauf celles qui sont truquées et donc font parti maintenant du innertext */
 
var str=balise.innerHTML;/* on reprend la balises  et on remplace les balises truquées par leur vrai syntaxe*/
var str=str.replace("*|b*", "</b>");
var str=str.replace(".b.", "<b>");
var str=str.replace("*|i*", "</i>");
var str=str.replace(".i.", "<i>");
var str=str.replace("*|u*", "</u>");
var str=str.replace(".u.", "<u>");
var str=str.replace("*|s*", "</s>");
var str=str.replace(".s.", "<s>");
 
balise.innerHTML=str;/*on applique le innerhtml dans la balises*/
balise.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();}
 
       putID_old(this); 
                                                 }
    selection.insertNode(balise);
 
 
    document.getElementById("PALETTE").style.visibility="hidden";   
     }
 
 
 
   function texte_size(valeur) 
   {
 
    var selection = selectionne_text();
    var selectedText = selection.extractContents();
 
    var balise = document.createElement("span");
    balise.style.fontSize =  valeur+"px";
    balise.appendChild(selectedText);
    balise.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this); 
                                                 }
    selection.insertNode(balise);
   }
 
                        function delformat()
                        {
     var obj= document.getElementById("old");
    var text=obj.outerHTML;
    /*alert(text);*/    
    obj.parentNode.insertBefore(document.createTextNode(obj.innerText), obj);
    obj.parentNode.removeChild(obj);
 
                         }
                         function insert_liste(typliste)
                        {
     var selection = selectionne_text();
    var selectedText = selection.extractContents();
    var baliseol = document.createElement(typliste);
    var baliseli = document.createElement("li");
    baliseli.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this); 
                                                 }
 
    baliseli.appendChild(selectedText);
    baliseol.appendChild(baliseli);
 
    selection.insertNode(baliseol);
   }
 
 
   function aligne(cote)
                        {
    var bal=quelle_balise();
    /*alert(bal.tagName);*/
    if(bal.tagName=="P"){
    bal.style.textAlign = cote;
    }
   }
 
 
function affiche_palette(bT)
{
var bleleft=document.getElementById("txtcoul")
var leleft=bT.style.left
var pal=document.getElementById("PALETTE");
pal.style.visibility="visible";
pal.style.position = "absolute";
pal.style.left = 450+"px";
pal.style.top = "10px";
}   
 
 
    function createpalette()
    {
 
var coul=["FFFFFF","FFCCCC","FFCC99","FFFF99","FFFFCC","99FF99","99FFFF","CCFFFF","CCCCFF","FFCCFF","CCCCCC","FF6666","FF9966","FFFF66","FFFF33","66FF99","33FFFF","66FFFF","9999FF","FF99FF","C0C0C0","FF0000","FF9900","FFCC66","FFFF00","33FF33","66CCCC","33CCFF","6666CC","CC66CC","999999","CC0000","FF6600","FFCC33","FFCC00","33CC00","00CCCC","3366FF","6633FF","CC33CC","666666","990000","CC6600","CC9933","999900","009900","339999","3333FF","6600CC","993399","333333","660000","993300","996633","666600","006600","336666","000099","333399","663366","000000","330000","663300","663333","333300","003300","003333","000066","330099","330033"];
 
    var MYBODY= document.body;
    var mydiv = document.createElement("div");
    mydiv.id="PALETTE";
    mydiv.style.width=187+"px";
    mydiv.style.border=1+"px solid gray";
    mydiv.style.display="inline-block";
    mydiv.style.backgroundColor ="gray";
    mydiv.style.visibility="hidden";
    mydiv.style.fontSize=0;
    for (var i = 0; i < 70; i++) 
    {
     var inputs= document.createElement("button");
      inputs.style.border=1+"px solid black";
      inputs.onmouseover=over;       
      inputs.onmouseout=out;       
      inputs.style.float="left"
      inputs.style.width=15+"px";
      inputs.style.height=15+"px";
      inputs.style.backgroundColor = "#"+coul[i];
      inputs.id="pal"+coul[i];
      inputs.onclick=function()
        {
        texte_couleur(this.id);
        }
 
    mydiv.appendChild(inputs);
 
     }
 
 
  MYBODY.appendChild(mydiv);
  }
 
 function over() {this.style.border = '1px solid #FFF';}
 
 function out() {this.style.border = '1px solid #000';}
 
</script>
 
</head>
<body>
 
 
<div id="ruban">  
<button onclick="texteBiU('b')">Bolder</button>
  <button onclick="texteBiU('i')">italic</button>
  <button onclick="texteBiU('u')">souligné</button>
  <button onclick="texteBiU('s')">texte barré </button>
  <button onclick="aligne('left')">aligne a gauche</button>
  <button onclick="aligne('center')">centrer</button>
  <button onclick="aligne('right')">aligne a droite</button>
 
<button id="txtcoul" onclick="affiche_palette(this)">texte en couleur </button>
  <button onclick="Backgtexte()">bacground texte</button>
        <button onclick="insert_liste('ol')">liste1.2.3</button>
               <button onclick="insert_liste('ul')">liste normale</button>
 
<select id="ListeElement" onchange="texte_size(this.value);"> 
   <option value=8>size 8</option> 
   <option value=10>size 10</option> 
   <option value=12>size 12</option> 
   <option value=14>size 14</option> 
   <option value=16>size 16</option> 
   <option value=18>size 18</option> 
   <option value=20>size 20</option> 
   <option value=22>size 22</option> 
   <option value=24>size 24</option> 
   <option value=26>size 26</option> 
   <option value=28>size 28</option> 
   <option value=30>size 30</option> 
   <option value=34>size 34</option> 
   <option value=40>size 40</option> 
   <option value=50>size 50</option> 
   <option value=60>size 60</option> 
   <option value=70>size 70</option> 
   <option value=80>size 80</option> 
</select>
 <button onclick="delformat()">del format</button>
<button onclick="codes()">codehtml</button>
 
</div>
 
<div id="editeur" contenteditable="true" >
   <p>tapez votre texte </p>
<p>tapez UN AUTRE texte </p>  
</div>
<script>createpalette()</script>
</body>
</html>

fait le test, tape du texte met plusieurs couleurs et selection une partie joignant deux portions de texte de 2 couleur différentes et applique une 3 eme couleur

**autran** · 29/11/2015, 13h40

Salut Patrick,

Je t'avouerai que ton code devient compliqué, sauf pour toi car tu es en immersion dedans.
Je ne vais donc pas pouvoir porter de jugement sur ton algo ni te dire qu'il y en a de meilleurs. Tout ce que je peux te dire c'est que quand ça sort de nos putains de caboches et que ça tourne on peut déjà s'estimer heureux.

En revanche (ouais y a toujours mais), je pense que tu devrais vérifier la balise car je crois qu'elle a dégagée de la norme HTML5. Donc quand tu vas sortir de IE, ça pourrait te poser des problèmes.

**patricktoulon** · 29/11/2015, 15h37

re

oui j'ai lu effectivement non pas qu'elle avait dégagée mais que la manipilation en devenait plus compliquée

c'est bien domage je trouve bien moins compliqué d'ecrire
truc machin chouette
que
truc machin chouette

sans parler des autres atribus(bold,italic,etc.....)

de plus si toi tu trouve que mon code est compliqué ca veut dire que j'ai bien progréssé dans la compréhention de javascript et sa syntaxe

en fin je le ferait aussi en span car d'apres d'autre personne sur d'autre forum je n'aurait pas a devoir palier a ce probleme de balises entrecroisées avec span
est ce vraiment le cas ?? il semblerait que l'autocomplétion se mette en route selon le navigateur IE en l'occurence

ainsi
cela
truc machin chouette
deviendrait ceci:
truc machin chouette
mais sa reste a verifier !!!!!!
apres il faut rester dans le contexte que le richtext va se retrouver dans un udserform excel vbe (webbrowser) et un hta qui me limite a la compatibilité IE9 et quelques atribus css compatible IE10 avec les bonnes balises meta de compatibilité

Fonction dans la même balise qui ne fonctionne plus

JavaScript

Discussions similaires

Partager

Partager