Fonction dans la même balise qui ne fonctionne plus

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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???

14/11/2015, 18h57
NoSmoking

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
14/11/2015, 19h20
patricktoulon

re

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
:D
14/11/2015, 19h33
autran
Citation:

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:

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

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:

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????

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

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!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>

14/11/2015, 22h19
patricktoulon

re exellent!!!

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 :king:

différer une action ou memoriser un element pour agir dessus avec un boutton

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:

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

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

Code:

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();

15/11/2015, 21h45
patricktoulon

re

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 :ptdr:

merci pour le retour
15/11/2015, 22h24
patricktoulon

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

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
15/11/2015, 23h52
autran

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:

balise.onclick = function (ev)

et ne lui passer aucun paramètre car ev ne sert à rien. Surement hérité de event.
16/11/2015, 02h27
patricktoulon

re
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:

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?

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

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

16/11/2015, 10h36
patricktoulon

re

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

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:

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:

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

construire une palette couleur avec une table

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

Citation:

<td width="5" height="5" class="tdpal1" onclick="texte_couleur(" bgcolor="#5f0547" #5fg547")"=""></td>
Code:

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 :D

16/11/2015, 18h26
NoSmoking

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.
16/11/2015, 18h45
patricktoulon

re

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 :ptdr:

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 :)
16/11/2015, 21h41
NoSmoking

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

Voir 40 message(s) de cette discussion en une page