Définir 'event' sur un élément contenu dans une iFrame ?

**Sanceray3** · 07/02/2010, 19h24

Bonjour à tous,

voilà je vous explique mon problème sur lequel je viens de me prendre la tête toute l'après midi et pour lequel je n'arrive toujours pas à trouver de solution.

J'utilise sur un site, un éditeur WYSIWYG nommé "TinyMCE". Ce dernier comme vous le savez sûrement utilise une iFrame. Ce que je voudrais c'est pouvoir créer un événement "click" sur les images qui sont au fur et à mesure placées dans l'éditeur. Je ne sais pas si vous arrivez à me suivre. :o)

En faites cet éditeur permet de rédiger du texte dans lequel on peut insérer des images, comme le ferait le logiciel Word par exemple. Ce que je souhaite c'est lorsqu'un utilisateur clique sur une image contenue dans l'éditeur, pouvoir lui afficher par exemple une alert javascript.

En temps normal c'est plutôt simple, il aurait fallut faire quelque chose dans cet esprit :

Code :

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

$('img').live("click",function(){alert ('toto');});

Mon hic c'est que mes éléments générés au fur et à mesure par TinyMCE se placent non pas dans ma fenêtre active mais dans l'iFrame TinyMCE nommée "elm1_ifr". J'ai essayé tout un tas de choses pour pouvoir définir mon event live sur les images de cette put*** de iFrame mais je n'y suis pas arrivé.

Pourtant j'arrive bien à intéragir sur le contenu de mon iFrame avec :

Code :

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

$('#elm1_ifr').contents().find('#tinymce')....

Ce que je voudrais en gros c'est savoir si à partir de mon fichier source, je peux définir un événement sur les balises 'img' (ajoutées dynamiquement au fur et à mesure) contenues dans mon iFrame déjà chargée.

Enfin j'espère avoir été "compréhensible"...

Je vous remercie par avance pour votre aide plus que précieuse.

**danielhagnoul** · 07/02/2010, 22h41

Bonsoir.

Comme je ne connaissais pas TinyMCE et que je disposais d'un peu de temps, j'ai fait un test. Je ne pense pas avoir compris votre demande, mais à toute fin utile voici mon code qui, grosse déception, ne fonctionne que sous Firefox. Voir les commentaires dans 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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
 
		/* TEST */
	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.1.min.js"></script>
	<script charset="CP-1252" src="jscripts/tiny_mce/tiny_mce.js"></script>
	<script>
		$(function(){
			tinyMCE.init({
				mode : "textareas",
				theme : "simple"
			});
		});
 
		$(window).load(function(){
 
			var monImg = $("<img/>", {
				id:"imgID",
				src:"../images/imageTest.png",
				css:{
					width:"170px",
					height:"100px",
					border:"1px solid grey"
				},
				click:function(){
					$(this).css({
						width:"270px",
						height:"200px",
						border:"2px groove red"
					});
				},
				mouseenter:function(){
					$(this).parent().css({backgroundColor:"grey"});
				}
			});
 
			/*
			 * J'ai utilisé Version 3.3b2 (2010-02-04)
			 * Chrome 4 : tinyMCE fonctionne, mais pas d'image.
			 * IE8 : tinyMCE ne fonctionne pas ! "Accès refusé sur tiny-mce.js".
			 * Firefox 3.6 c'est OK !
			 */
 
			var maFrame = $("#elm1_ifr").contents();
 
			maFrame.find("p:last").before(monImg);
 
			// live ne fonctionne pas
			// pour le fun, plus simplement inclure dans monImg
			maFrame.find("img").bind("mouseleave", function(){
				$(this).parent().css({backgroundColor:"#ffffff"});
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<form>
			<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
			<textarea id="elm1" style="width:600px;height:400px;">
				&lt;p&gt;
					This is some example text that you can edit inside the &lt;strong&gt;TinyMCE editor&lt;/strong&gt;.
				&lt;/p&gt;
				&lt;p&gt;
				Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros.
				&lt;/p&gt;
			</textarea>
		</form>
 
	</div>
</body>  
</html>

**Sanceray3** · 08/02/2010, 11h34

Bonjour Daniel,

Avant toute chose grand merci pour ton aide et tes précieux conseils.

Je n’avais pas pensé à utiliser la fonction « bind », je vais tester ça ce soir en rentrant chez moi.

En faites comme tu peux le remarquer sur TinyMCE tu as la possibilité de glisser directement des images dans la fenêtre lorsque tu es en mode « éditeur ». Tu peux de là placer ton image dans ton texte, agrandir / réduire l’image…, comme on le ferait le plus simplement du monde sous Word.

Maintenant ce que je souhaitais c’était afficher une fenêtre, du moins pour l’instant déclencher une alert box, lorsque l’on clique sur une de ces images insérée. La difficulté réside ici dans le fait que ces images ne sont pas existantes au moment de l’initialisation de l’iFrame, d’où mon souhait d’utiliser quelque chose similaire à la fonction « live ». Ce qui m’inquiète dans l’utilisation des « find("img") », c’est qu’il faut un évènement déclencheur pour effectuer cette recherche d’éléments img puisque si je le fais juste après l’initialisation de mon iFrame, mes images ne sont pas encore existantes.

Dans le cas où mes images auraient été présentes dès le départ dans mon iFrame, ça aurait été impeccable mais dans mon cas, les images sont ajoutées au fur et à mesure après la création de l’iFrame, je me retrouve donc toujours confronté à un souci, celui de trouver un moyen lorsque quelqu’un clique sur cette image de déclencher une action.

Pour moi et c’est là où je me trompe peut être, l’idéal serait de définir une fonction live / click sur les éléments « img » au moment de l’initialisation de l’iFrame, directement dans du code JS de cette iFrame. Mais c’est bien là mon problème je ne trouve pas où je peux faire cela dans les scripts TinyMCE.

Merci encore pour ton aide.

Nicolas

**danielhagnoul** · 08/02/2010, 20h57

Bonsoir.

Lorsque j'ouvre les versions de démonstration de TinyMCE, exemple Word et Full, sous Firefox, Firebug joue au sapin de Noël avec plein de boules rouges (erreurs en cascade). Impossible d'inclure quoi que ce soit par l'intermédiaire des boutons, car il n'ouvre qu'une boîte de dialogue vide.

De toute manière, ce que vous demandez implique une modification interne d'un programme complexe, je vous conseille d'écrire à l'auteur seul compétent pour modifier sa création.

Comme je l'ai écrit dans les commentaires de mon code de test, live ne fonctionne pas et l'exemple avec bind ne vous aidera pas.

**Sanceray3** · 08/02/2010, 23h10

Bonsoir,

Je pense en effet que je vais m'orienter vers un autre éditeur WYIWYG qui n'utilise pas d'iFrame et dont le code m'est en effet plus compréhensible et accessible.

Merci en tous cas pour votre aide.

Définir 'event' sur un élément contenu dans une iFrame ?

jQuery

Discussions similaires

Partager

Partager