Fonction dans la même balise qui ne fonctionne plus

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

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, 18h57

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, 19h20

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

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

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, 20h18

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, 22h19

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

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

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

Fonction dans la même balise qui ne fonctionne plus

JavaScript

Vue hybride

Discussions similaires

Partager

Partager