Textarea et WYSIWYG

**antoinelavigne** · 18/08/2011, 13h07

Bonjour,

je suis novice en Javascript mais je connais bien les autres languages orientés web : xhtml, css, php & mysql

Sur mon forum, je cherchre à créer un système de smiley comme sur le forum de Developpez.com : on affiche les smileys dans un cadre à côté du textarea et quand l'utilisateur clique dessus, ça insère la balise correspondante dans le textarea.

Je récupère mon textarea grâce à document.getElementById et j'insère le bbcode correspondant avec un element.value+''+code

Le problème vient du fait que j'utilise un éditeur WYSIWYG qui s'apelle TinyEditor et quand je l'active, ca ne marche plus.

En effet, Tiny Editor crée "pleins de cadres" par dessus mon textarea initial et je n'arrive pas à sélectionner le bon. Voilà, simplifié of course, le code généré une fois que l'éditeur est activé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<textarea id="ma_boite_originale" cols="" rows="">
<iframe border="0" width="" height="">
<html>
<head>
<body id="editor">


</body>
</head>
</html>
</iframe>
</textarea>

Le code ci-dessus en gris est le code rajouté par mon éditeur WYSIWYG. C'est dans le <body id="editor"> que le texte tapé dans le textarea s'affiche et c'est ce dernier qu'il faudrait que je sélectionne pour insérer mes smileys mais je n'y arrive pas.

Help !
Merci d'avance à ceux qui m'aideront

**Loceka** · 18/08/2011, 14h24

Le truc c'est que c'est dans une iframe. Il te faut donc accéder au code de l'iframe. Pour ce faire, il faut récupérer l'iframe en question (via son ID si elle en a un ou le nom de l'élément) et utiliser son "contentDocument" :

Code :

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

1
2
var myf = document.getElementById("myiframe");
var contenu = myf.contentWindow.document || myf.contentDocument;

Etant donné que la "page" chargée dans l'iframe est locale, tu devrais pouvoir en modifier le code.

**antoinelavigne** · 24/08/2011, 13h28

Salut,

dabord : merci d'essayer de m'aider

Je n'y arrive toujours pas. Le problème c'est que l'iframe en question n'a pas de ID et pas de NAME. J'ai donc essayé d'en rajouter un moi-même en javascript, ca marche bien mais l'éditeur wysiwyg ne marche plus du coup.

Je suis donc allé founier sur internet pour voir si il y avait d'autres méthodes pour choper mon iframe sans Id et sans Name : j'ai trouvé getElementsByTagName

Ca marche bien car quand je fais ce test il me repere bien 1 iframe :

Code :

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

document.writeln("Il y a "+tables.length+" iframe dans cette page");

Cependant, ca ne marche pas et aucun code n'est inséré dans mon textarea : peut-être est ce parce que je n'ai pas ciblé mon <body id="editor"> ? En tout cas je ne sais pas le faire :s

Voilà le code que j'utilise :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
	function smiley(code)
	{
	var myf=document.getElementsByTagName("iframe");
    var element = myf.contentWindow.document || myf.contentDocument;
	element.value = element.value+''+code;
	document.selection.createRange().text;
	}
</script>
 
<a href="javascript: smiley(' ;) ');"><img src="http://www.monsite.com/imgs2/smile_wink.gif" border="0"/></a>

**Sharcoux** · 24/08/2011, 13h34

Code :

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

getElementsByTagName

renvoie une liste d'objets.

Code :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
	function smiley(code)
	{
	var myf=document.getElementsByTagName("iframe")[0];
    var element = myf.contentWindow.document || myf.contentDocument;
	element.value = element.value+' '+code;
	document.selection.createRange().text;
	}
</script>

**antoinelavigne** · 24/08/2011, 13h37

Pas bête

Par contre ce ne marche toujours pas ... :s aucun code de n'insère dans l'iframe quand je clique sur le smiley !

EDIT : J'ai également essayé ca :

Code :

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

var myf=document.getElementsByTagName("iframe")[0].contentDocument.body.innerHTML;

... sans succés

**Loceka** · 24/08/2011, 13h50

Ah parce que c'est censé exister ".value" sur un contentDocument (équivalent de document) ?

Je te conseille vivement de regarder ce qu'il est possible ou non de faire sur chaque élément.

**Bovino** · 24/08/2011, 13h52

Code :

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

element.value = element.value+''+code;

element est le body de ton iframe (ou son innerHTML), il n'a donc pas de propriété value...

Textarea et WYSIWYG

JavaScript

Vue hybride

Discussions similaires

Partager

Partager