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

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

Bonjour à toi,

merci pour le lien que je vais précieusement garder dans mes favoris mais je t'avouerais que ca ne m'avance pas vraiment dans mon problème ...

Envoyé par Bovino

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

Bah oui mais quand j'ajoute du texte par l'éditeur wysiwyg et que je regarde la source avec Chrome, le texte s'insère directement dans le <body> ...

Si j'essaie de résumer :

1/ Bien sélectionner l'élement à modifier
2/ Insérer le code du smiley dans l'élément

Je ne sais même pas si l'étape n°1 est réussie ....

**Loceka** · 24/08/2011, 14h00

Ben le myf.contentWindow.document || myf.contentDocument te donne le "document" de l'iFrame. A partir de là tu peux faire quasiment tout ce que tu peux faire avec l'objet document normal et tu ne peux rien faire de plus.

Donc à partir de ce contentDocument tu peux faire un getElementsByTagName, getElementById, ...
Après à toi de récupérer l'élément que tu veux.

Envoyé par Bovino

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

Ce n'est même pas totalement le body, c'est le document, au dessus du body, du head et du html.

**antoinelavigne** · 24/08/2011, 14h05

En suivant vos conseils, voilà ce que j'ai essayé :

Code :

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

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

.. en tentant donc de récupérer mon <body id="editor"> dans la variable "legoo", mais toujours pas :'(

**Loceka** · 24/08/2011, 14h12

Pour ne pas me répéter :
Ah parce que c'est censé exister ".value" sur un body ?

".value" ne fonctionne que sur des éléments de type input (comme tu l'aurais vu sur le site que j'ai donné).

Pour tout le reste il faut utiliser les méthode DOM comme createElement, firstChild.data ou innerHTML (

).

Donc, encore une fois : n'essaye pas de bidouiller en utilisant des trucs qui n'existent pas. Regarde ce qui existe et code en fonction.

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

J'avance pas à pas.
En suivant vos conseils, je me suis debrouillé pour créer cette fonction :

Code :

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

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

qui marche. Le problème c'est que quand je clique sur mon smiley, ca supprime tout le texte existant dans le textarea pour le remplacer par mon smiley. Pas très pratique

Il me faudrait donc insérer mon code smiley au niveau du curseur du visiteur et là encre je trouve 40.000 trucs différents sur le net. Si j'essaie de faire le point, je dirais qu'il faut que j'utilise notament .focus .. ?

Le problème c'est qu'en faisant des recherches sur google, je trouve beaucoup de gens qui sont dans le même cas mais je trouve aussi 10.00 codes différents et bien longs donc difficiles à disséquer ! Une petite aide ?

**Bovino** · 24/08/2011, 15h31

Envoyé par Loceka

Ce n'est même pas totalement le body, c'est le document, au dessus du body, du head et du html.

Nanmaiho !!! Si on a pu le droit de raconter des bêtises maintenant...

En fait, en écrivant le message, j'ai vu la suite :

Code :

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

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

d'où l'allusion au body

Mais tu as raison de rectifier, histoire de n'induire personne en erreur !

**antoinelavigne** · 25/08/2011, 19h22

Bonjour à tous,

je suis toujours bloqué sur le problème suivant : le code du smiley s'affiche bien mais supprime tout le texte existant dans le textarea ...

Je pense qu'il faut utiliser focus(); et Createrange(); mais impossible de trouver des explications claires sur internet.

Un petit coup de pouce serait le bienvenue

**Loceka** · 26/08/2011, 10h51

Sans voir ton code on ne peut pas faire grand chose.

**antoinelavigne** · 26/08/2011, 15h58

Envoyé par Loceka

Sans voir ton code on ne peut pas faire grand chose.

Bonjour à toi,

le même qu'au dessus

**Nowwis** · 26/08/2011, 16h05

Et si tu ajoutés ce qui est déjà existant :

Code :

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

legoo.innerHTML += code;

**Sharcoux** · 26/08/2011, 17h06

J'imagine qu'il veut ajouter le smiley à l'endroit du caret

**antoinelavigne** · 27/08/2011, 19h20

Envoyé par Simdu80

Et si tu ajoutés ce qui est déjà existant :

Code :

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

legoo.innerHTML += code;

Bonjour,

ca marche à moitié

Effectivement ca rajoute bien le smiley mais :

- sous firefox ca rajoute un retour a la ligne (IE & Chrome pas de probleme)
- ca se rajoute à la fin du texte, pas à l'endroit du curseur

**antoinelavigne** · 03/09/2011, 13h47

Bonjour,

un peu d'aide ?

Mon problème reste toujours d'actualité

Textarea et WYSIWYG

JavaScript

Discussions similaires

Partager

Partager