Textarea et WYSIWYG

Version imprimable

18/08/2011, 13h07
antoinelavigne

Textarea et WYSIWYG
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:

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 :D
18/08/2011, 14h24
Loceka
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:

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.

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:

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:

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>

Code:

getElementsByTagName

renvoie une liste d'objets.

Code:

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>

24/08/2011, 13h37
antoinelavigne

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:

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

... sans succés
24/08/2011, 13h50
Loceka

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

Je te conseille vivement de regarder ce qu'il est possible ou non de faire sur chaque élément.
24/08/2011, 13h52
Bovino

Code:

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

element est le body de ton iframe (ou son innerHTML), il n'a donc pas de propriété value...
24/08/2011, 13h56
antoinelavigne

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:

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 ....
24/08/2011, 14h00
Loceka

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:

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.

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

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 :'(

24/08/2011, 14h12
Loceka

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

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

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

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 :P

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 ?

24/08/2011, 15h31
Bovino

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

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

Code:

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 !
25/08/2011, 19h22
antoinelavigne

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 :ccool:
26/08/2011, 10h51
Loceka

Sans voir ton code on ne peut pas faire grand chose. :)
26/08/2011, 15h58
antoinelavigne

Citation:

Envoyé par Loceka

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

Bonjour à toi,

le même qu'au dessus
26/08/2011, 16h05
Nowwis

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

Code:

legoo.innerHTML += code;
26/08/2011, 17h06
Sharcoux

J'imagine qu'il veut ajouter le smiley à l'endroit du caret
27/08/2011, 19h20
antoinelavigne

Citation:

Envoyé par Simdu80

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

Code:

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
03/09/2011, 13h47
antoinelavigne

Bonjour,

un peu d'aide ?

Mon problème reste toujours d'actualité ;)