Fonction dans la même balise qui ne fonctionne plus

**patricktoulon** · 14/11/2015, 19h45

bonjour a tous

je suis en train de faire un editeur wiziwig que j'integrerais dans un webrowser dans un userform en vba

en attendant je le fait dans un fichier html

1 question :pourquoi le bouton couleur texte ne fonctionne pas
2 question : pourquoi quand je met les fonctions dans la meme balises "<script>" elles ne fonctionnent plus

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
<html>
<head>
<style>
#editeur{width:650px;
height:500px;
border:1px solid blue;
}
</style>
 
 
<script>
  function Backgtexte() {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var balise = document.createElement("span");
    balise.style.backgroundColor = "yellow";
    balise.appendChild(selectedText);
 
    selection.insertNode(balise);
 
}
</script>
 <script>
function texteBiU(BiU) {
 var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var balise = document.createElement(BiU);
 
    balise.appendChild(selectedText);
    balise.onclick = function (ev) {
        this.parentNode.insertBefore(document.createTextNode(this.innerHTML), this);
        this.parentNode.removeChild(this);
    }
    selection.insertNode(balise);
}
</script>
<script>
function texte-couleur(coul) {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var balise = document.createElement("span");
    balise.style.Color = coul;
    balise.appendChild(selectedText);
 
    selection.insertNode(balise);
 
}
</script>
</head>
<body>
<div id="editeur" contenteditable="true" >
<p>tapez votre texte </p>
</div>
<button onclick="texteBiU('b')">Bold</button>
<button onclick="texteBiU('i')">italic</button>
<button onclick="texteBiU('u')">souligné</button>
<button onclick="texte-couleur('#FF0000')">texte en couleur </button>
<button onclick="Backgtexte()">bacground texte</button>
 
</body>
</html>

une idée???

**NoSmoking** · 14/11/2015, 19h57

Bonjour,
juste jeté un oeil mais déjà

• inutile de mettre des balise <script></script> de partout
• en javascript, comme dans les autre langage écrire un nom avec un - dedans génère une erreur car assimilé à une soustraction donc pas ~~texte-couleur~~ mais texte_couleur

**patricktoulon** · 14/11/2015, 20h20

Merci Nosmoking pour le retour
je vais essayer cela
quand au balises je suis d'accords mais quand je les met dans une seule elles ne fonctionnent plus
bon deja je vais corriger les noms avec un trait d'union

je reviend le cas echeant

merci encore

**autran** · 14/11/2015, 20h33

Envoyé par patricktoulon

2 question : pourquoi quand je met les fonctions dans la meme balises "<script>" elles ne fonctionnent plus

Bonjour Patrick
pour que ça fonctionne dans la même balise script j'ai modifié

Code :

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

1
2
3
4
 
<meta charset="UTF-8">
<script type="text/javascript">
function texte_couleur(coul)

Maintenant je vais regarder ta fonction texte_couleur()
A plus tard
Marc

**patricktoulon** · 14/11/2015, 20h38

re
bon Ok les fonctions sont toutes dans la meme balise "script"
c'estait bien le nom de la fonctiontexte_couleur qui foutait le boxon

cependant elle ne fonctionne toujours pas

j'ai mis un msgbox(alert en javascript) pour voir si la variable etait bien injectée et recu par la fonction
c'est le cas

je suppose donc que c'est les lignes d'en dessous qui ne vont pas

mais je ne vois pas ou !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function texte_couleur(coul) {
    /*alert(coul);*/
var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var balise = document.createElement("span");
   /* balise.style.font.Color=coul;  nemarche pas */
     /* balise.style.Color=coul;  nemarche pas */
 
balise.appendChild(selectedText);
 
    selection.insertNode(balise);
 
}

une idée????

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

Patrick, je n'avais pas fait gaffe mais color doit être en minuscule et tout marche.
Voila ce que ça donne au final :

Code html :

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
 
<!doctype html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<style>
                #editeur
                {
                        width:650px;
                        height:500px;
                        border:1px solid blue;
                }
                </style>
		<script type="text/javascript">
                        function Backgtexte() 
                        {
                                var selection = window.getSelection().getRangeAt(0);
                                var selectedText = selection.extractContents();
                                var balise = document.createElement("span");
                                balise.style.backgroundColor = "yellow";
                                balise.appendChild(selectedText);
                                selection.insertNode(balise);
                        }
 
                        function texteBiU(BiU) 
                        {
                                var selection = window.getSelection().getRangeAt(0);
                                var selectedText = selection.extractContents();
                                var balise = document.createElement(BiU);
                                balise.appendChild(selectedText);
                                balise.onclick = function (ev) 
                                {
                                        this.parentNode.insertBefore(document.createTextNode(this.innerHTML), this);
                                        this.parentNode.removeChild(this);
                                }
                                selection.insertNode(balise);
                        }
 
                        function texte_couleur(coul) 
                        {
                                var selection = window.getSelection().getRangeAt(0);
                                var selectedText = selection.extractContents();
                                var balise = document.createElement("span");
                                balise.style.color = coul;
                                balise.appendChild(selectedText);
                                selection.insertNode(balise); 
                        }
                </script>
	</head>
	<body>
		<div id="editeur" contenteditable="true" >
			<p>tapez votre texte </p>
		</div>
		<button onclick="texteBiU('b')">Bold</button>
		<button onclick="texteBiU('i')">italic</button>
		<button onclick="texteBiU('u')">souligné</button>
		<button onclick="texte_couleur('red')">texte en couleur </button>
		<button onclick="Backgtexte()">bacground texte</button>
	</body>
</html>

**patricktoulon** · 14/11/2015, 23h19

re
un grand merci pour le retour Autran

ca fonctionne nickel

et pour ce que ca interesse pour s'en servir dans un "HTA"(html Application) ou dans un webbrowser dans vb ou vba car le webbrowser utilise encore les protocole IE8 et 9
il faut ajouter cette balise meta dans le head

[QUOTE]<meta http-equiv="X-UA-Compatible" content="IE=10" />[/QUOTE]

et si cela ne suffit pas utiliser simulate dans la balise meta

purré j'ai moins l'impression de me casser la tete pour rien la

merci Autran

**patricktoulon** · 15/11/2015, 15h34

bonjour a tous

voila j'avance un peu dans mon richtext editor vraiment tres doucement

voila j'ai remis le remove au clic de chaque balises j'ai remplacer innerHTML par innerText en effet le resultat c'est que quand je supprimais la mise en forme au clic les balises devenaient de l'innertext pas tres chouette

maintenant j'ai 2 questions:

question 1 =est il possible de faire une fonction generale pour la selection de texte puis s'en servir dans les autres fonctions

question 2 = le clic sans selectionner declanche le remove format (remet le texte a l'endroit du clic a la normal ) y aurait il pas un moyen de :
memoriser le this et avec un bouton en cliquant dessus ferait ce que fait le clic sur le texte

pour l'instant voila le code

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
<!doctype html>
<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;
  }
  </style>
<script type="text/vbscript">
sub codes()
msgbox document.getelementbyID("editeur").innerhtml
end sub 
</script>
 
<script type="text/javascript">
   function Backgtexte() 
   {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var balise = document.createElement("span");
    balise.style.backgroundColor = "yellow";
    balise.appendChild(selectedText);
    balise.onclick = function (ev) 
    {
     this.parentNode.insertBefore(document.createTextNode(this.innerText), this);
     this.parentNode.removeChild(this);
    }
    selection.insertNode(balise);
   }
 
 
 
 
                        function texteBiU(BiU) 
   {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var balise = document.createElement(BiU);
    balise.appendChild(selectedText);
    balise.onclick = function (ev) 
    {
 
                                        this.parentNode.insertBefore(document.createTextNode(this.innerText), this);
     this.parentNode.removeChild(this);
    }
    selection.insertNode(balise);
   }
 
 
                           function texte_couleur(coul) 
   {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var balise = document.createElement("span");
    balise.style.color = coul;
    balise.appendChild(selectedText);
    balise.onclick = function (ev) 
    {
     this.parentNode.insertBefore(document.createTextNode(this.innerText), this);
     this.parentNode.removeChild(this);
    }
    selection.insertNode(balise);
   }
 
                        function texte_size(valeur) 
   {
 
   var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var balise = document.createElement("span");
    balise.style.fontSize =  valeur+"px";
    balise.appendChild(selectedText);
    balise.onclick = function (ev) 
    {
     this.parentNode.insertBefore(document.createTextNode(this.innerText), this);
     this.parentNode.removeChild(this);
    }
    selection.insertNode(balise);
   }
 
 
</script>
 </head>
 <body>
  <div id="editeur" contenteditable="true" >
   <p>tapez votre texte </p>
  </div>
  <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="texte_couleur('red')">texte en couleur </button>
  <button onclick="Backgtexte()">bacground texte</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="codes()">codehtml</button>
 
</body>
</html>

merci d'avance pour le retour

**autran** · 15/11/2015, 20h57

Salut patrick
Est-ce que tu cherches à factoriser du code comme ceci :

Code javascript :

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

1
2
3
4
5
6
7
8
9
function selectionne_text()
			{
				return window.getSelection().getRangeAt(0);
			}
 
			function Backgtexte() 
			{
				var selection = selectionne_text();
				var selectedText = selection.extractContents();

**patricktoulon** · 15/11/2015, 22h45

Bonsoir Autran

oui je crois comprendre que c'est une fonction en public enfin global si je puis m'exprimer ainsi je pense que c'est ca
il me faudrait la meme chose pour this aussi que j'utilse dans le clic de l'element créé c'est cette action que je veux différer par interaction d'un bouton
car en l'etat elle fonctionne mais me permet pas de revenir sur le texte pour corriger par exemple

je vais tester car je vais doucement je suis perdu, perché ,paumé avec la syntaxe java j'ai bouffé la faq pendant 3 heures j'ai mal au crane

merci pour le retour

**patricktoulon** · 15/11/2015, 23h24

ok ca fonctionne
mais n'y aurait il pas moyen d'y inclure ces deux ligne ligne tout du moins l'extractcontents

Code :

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

1
2
var selection = selectionne_text();
    var selectedText = selection.extractContents();

car en l'etat finalement je gagne pas en simplicité de code cela dit je garde quand meme
j'apprend un peu a me promener dans le code avec des variables

**autran** · 16/11/2015, 00h52

Tu ne gagneras rien car tu as besoin de selection à la fin de tes 4 fonctions. Or, si tu mutualises dans une fonction globale qui te renvoie selectedText tu perds selection

En revanche, tu dois pouvoir sortir ta fonction anonyme

Code :

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

balise.onclick = function (ev)

et ne lui passer aucun paramètre car ev ne sert à rien. Surement hérité de event.

**patricktoulon** · 16/11/2015, 03h27

re
a oui exact je n'est pas capté éffectivement on insert le node sur la selection

parcontre pour la fonction ev tu m'a largé

mon besoins est simplement de memoriser le balise
et ceci: dans le clic d'un bouton

Code :

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

1
2
3
this.parentNode.insertBefore(document.createTextNode(this.innerText), this);
     this.parentNode.removeChild(this);
    }

mais dans la fonction this represent balise si je me trompe pas donc il faudrait que balise soit en globale non?

**autran** · 16/11/2015, 08h40

effectivement tu auras du mal à sortir ta fonction anonyme.
mais en revanche ton paramètre ev ne sert à rien donc tu fais juste :

Code javascript :

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

1
2
3
4
5
balise.onclick = function() 
				{
					this.parentNode.insertBefore(document.createTextNode(this.innerHTML), this);
					this.parentNode.removeChild(this);
				}

**patricktoulon** · 16/11/2015, 11h36

Bonjour Autran

ok mais y aurait il pas un moyen de mettre

var myobj /*en debut de script*/

et mettre dans cette fonction anonyme myobg =this

ainsi tant que je n'ai pas recliqué myobj est la derniere balise sur la quelle j'ai cliqué

il doit bien avoir un moyen quand meme en vb/vbs c'est enfantin avec java je suppose que ca doit l'etre tout autant

**patricktoulon** · 16/11/2015, 13h30

bon j'ai trouvé une methode un peu sale mais elle fonctionne presque bien

dans la fonction annoyme je vire tout et j'attribu un id a l'element cliqué

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 texteBiU(BiU) 
   {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var balise = document.createElement(BiU);
    balise.appendChild(selectedText);
    balise.onclick = function () 
 
                               {
 
                                       /document.getElementById("old").id="" ;/
 
                                        /*this.parentNode.insertBefore(document.createTextNode(this.innerText), this);*/
     /*this.parentNode.removeChild(this);*/
     this.id="old";
                                }
    selection.insertNode(balise);
 
 
                               }

ensuite dans le click d'un bouton je l'envoie a la fonction test

Code :

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

1
2
3
4
5
6
7
function test()
                        {
     var obj= document.getElementById("old");
    obj.parentNode.insertBefore(document.createTextNode(obj.innerText), obj);
    obj.parentNode.removeChild(obj);
 
                         }

reste maintenant a enlever l'id dans le clic de l'element a cas ou j'aurais cliqué plusieurs fois dans le texte

**patricktoulon** · 16/11/2015, 19h09

bonjour a tous
je souhaiterais construire des l'ouverture de la page une palette couleur

Probleme 1 :je n'ai aucune idée du comment iterer les couleur(56)

probleme 2 la ligne write td genere un code bizzarre
du genre

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
function createpalette()
{
document.write("<div id=pal1>");
document.write('<table border="1">');
for (var j=1 ; j<=7 ; j=j+1) {
  document.write('<tr>'); /* début de ligne */
  for (var i=1 ; i<=8 ; i=i+1) {
    document.write('<td  class="tdpal1" bgcolor=\"#5fg547\" width=5  height=5 onclick="texte_couleur(\"#5fg547\")\" >');
    document.write('');
    document.write('</td>');
  }
  document.write('</tr>'); /* fin de ligne */
}
document.write('</table>');
document.write('</div>');
}

j'ai essayer avec ou sans double cote etc... rien n'y fait
je n'ai rien contre le mode create et appendchild si vous avez des exemples mais je la veux en table
en effet la destination n'etant pas une page web mais un hta voir un webbrowser en vb certains fonction java ne sont pas compatibles

si vous avez des idées je suis preneur

**NoSmoking** · 16/11/2015, 19h26

Bonjour,
pas tout lu mais un conseil
OUBLIE document.write, préfère lui les méthodes du DOM comme insertCell, insertRow ou autre createElement, tu auras moins de surprise.

**patricktoulon** · 16/11/2015, 19h45

Merci nosmoking pour le retour

ok va pour le create et appendchild

heu... insert.... connais pas ca fait quand meme moins de 2 semaine que je javate

la methode write fonctionne pourtant tres bien en VBS tout du moins le code sous une forme différente

apres il faut pas perdre de vue que la destination est un hta ce limitant au librairie IE 9 pas tout de ie 10 avec des balises meta

bon je vais regarder insert row et /cell

merci encore

**NoSmoking** · 16/11/2015, 22h41

Juste une chose encore JavaScript et pas ~~Java~~ rien à voir si ce n'est les 4 premières lettres

Fonction dans la même balise qui ne fonctionne plus

JavaScript

Discussions similaires

Partager

Partager