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

Citation:

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.

Citation:

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

Citation:

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

Citation:

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

Citation:

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é

24/08/2011, 13h37	#5
antoinelavigne Invité régulier Inscription : mars 2005 Messages : 82 Détails du profil Informations forums : Inscription : mars 2005 Messages : 82 Points : 9 Points : 9	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
	00

24/08/2011, 13h52	#7
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 793 Points : 35 793	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... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

24/08/2011, 14h12	#11
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 451 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 451 Points : 2 151 Points : 2 151	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.
	00

26/08/2011, 16h05	#17
Nowwis Membre éclairé Développeur Web Inscription : juin 2009 Messages : 363 Détails du profil Informations personnelles : Sexe : Âge : 21 Localisation : France Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : juin 2009 Messages : 363 Points : 365 Points : 365	Et si tu ajoutés ce qui est déjà existant : Code : Sélectionner tout - Visualiser dans une fenêtre à part legoo.innerHTML += code;
	00

24/08/2011, 13h50	#6
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 451 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 451 Points : 2 151 Points : 2 151	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.
	00

25/08/2011, 19h22	#14
antoinelavigne Invité régulier Inscription : mars 2005 Messages : 82 Détails du profil Informations forums : Inscription : mars 2005 Messages : 82 Points : 9 Points : 9	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
	00

26/08/2011, 10h51	#15
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 451 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 451 Points : 2 151 Points : 2 151	Sans voir ton code on ne peut pas faire grand chose.
	00

26/08/2011, 17h06	#18
Sharcoux Membre habitué Étudiant Inscription : mai 2011 Messages : 226 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mai 2011 Messages : 226 Points : 126 Points : 126	J'imagine qu'il veut ajouter le smiley à l'endroit du caret
	00

03/09/2011, 13h47	#20
antoinelavigne Invité régulier Inscription : mars 2005 Messages : 82 Détails du profil Informations forums : Inscription : mars 2005 Messages : 82 Points : 9 Points : 9	Bonjour, un peu d'aide ? Mon problème reste toujours d'actualité
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email