Remplir l'éditeur via javascript

Version imprimable

Bonjour ,

Comment puis-je mettre un texte dans un éditeur tinyMCE via javascript ?!
J'ai essayé pas mal de solutions sur le net , mais toujours pas résultats (l'éditeur est toujours vide) et firebug me fournit une erreur "tinyMCE.get is not a function". malgré que le syntaxe est correcte à ce que j'ai vu ici http://tinymce.moxiecode.com/wiki.ph...tor.setContent

Voici un morceau de code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <head> <script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "exact", theme : "advanced", elements : "text", language : "fr" }); tinyMCE.get('text').setContent('<span>test</span>'); // ici le code pour insérer du texte </script> </head> <body> <textarea name="text" id="text" ></textarea> </body> </html>
Merci beaucoup.

Salut,

ton textarea se "transforme" t-il en éditeur tinyMCE ou pas ?

Car, à vue de nez, je dirais qu'en fait, tu tentes d'initialiser ton éditeur tinyMCE sur un textarea qui n'existe pas encore dans le document (le navigateur lit et interprête le code dans l'ordre de la page, et ton javascript s'exécute visiblement avant que ton textarea ne soit chargé par le navigateur), la fonction pour mettre à jour le contenu de l'éditeur ne fonctionne pas non plus puisque l'éditeur n'est pas véritablement initialisé.

Il faut pour cela que tu indiques au navigateur que tes instructions s'exécutent une fois le document chargé.

Voici un exemple de code qui te permet d'initialiser ton éditeur tinyMCE une fois le document entièrement chargé :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function addEvent(obj,event,fct) { if (obj.attachEvent) obj.attachEvent('on' + event,fct); else obj.addEventListener(event,fct,true); } function initTinyMCE(){ tinyMCE.init({ mode : "exact", theme : "advanced", elements : "text", language : "fr" }); tinyMCE.get('text').setContent('<span>test</span>'); // ici le code pour insérer du texte } addEvent(window,"load",initTinyMCE);
Ou si tu utilises un framework, genre jQuery :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function initTinyMCE(){ tinyMCE.init({ mode : "exact", theme : "advanced", elements : "text", language : "fr" }); tinyMCE.get('text').setContent('<span>test</span>'); // ici le code pour insérer du texte } $(document).ready(initTinyMCE);
A+

Merci pour ton aide.

Si , j'ai mis mon champs textarea

Code:

<textarea name="text" id="text" ></textarea>

et mon éditeur apparait bien , il fonctionne mais toujours j'ai le même problème même avec jquery , vraiment ça me pose toujours un problème même si le truc parait simple.
Voici mon code avec jquery si dessous
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <head> <script src="jquery-1.2.3.min.js"></script> <script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "exact", theme : "advanced", elements : "text", language : "fr" }); jQuery(document).ready(function($) { tinyMCE.get('text').setContent('<span>test</span>'); // ici le code pour insérer du texte }); </script> </head> <body> <textarea name="text" id="text" ></textarea> </body> </html>
j'ai essayé encore d'appeler le document .ready à la fin de la page (après le textarea) même si ça parait inutile car on utilise le document.ready

10/01/2011, 15h32
BaBeuH

Est-ce que le tinyMCE.get("...") te renvoie bien une instance tinyMCE ?

Que donne le code suivant :

Code:

alert(tinyMCE.get('text'));

dans ton document.ready ? undefined ou [object Object] ?
10/01/2011, 15h43
betadev

Justement , ça n'affichera pas une alerte javascript , mais plutôt une erreur avec firebug "tinyMCE.get is not a function" ,
je suis entrain de chercher maintenant comment avoir une instance de l'objet tinyMCE pour essayer d'appeler la fonction get avec lui !!! peut être que ça résoudra le problème.
10/01/2011, 15h52
BaBeuH

Et dans firebug, si tu ajoutes un espion dans la partie "script" sur "tinyMCE", qu'obtiens-tu ?

Il semblerait que ton objet tinyMCE soit écrasé par un autre objet ne possédant pas de méthode get ? à moins que ce soit un problème de scope ?
10/01/2011, 16h00
betadev

Si je met "alert(tinyMCE.get('text'));" dans la partie espion ça m'affiche l'erreur "TypeError: tinyMCE.get is not a function" , tandis si je met seulement "alert(tinyMCE);" ça affichera une alerte [objet Object] ce qui signifit que l'objet existe bien.
10/01/2011, 16h02
BaBeuH

Mets juste tinyMCE dans la partie espion, pour inspecter l'objet, ça pourra peut-être t'aider à savoir quel est cet objet qui ne possède pas de méthode "get"...
10/01/2011, 16h16
betadev

c'est un objet de l'éditeur tinyMCE ,c'est bien l'objet demandé mais toujours le meme problème ,.

En tout cas merci encore de ton aide ne pert pas beaucoup de temps , je vais l'abandonner un peu ensuite je reviendrai pour refaire mes recherche car on dit que si une truc pérsiste beaucoup vaux mieux se reposer ensuite réssayer !!!

peut etre que je la trouvera.

Voooila , enfin j'ai trouvé une solution mais ce n'est pas pro :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <html> <head> <script src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="tiny_mce/jscripts/tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "exact", theme : "advanced", elements : "text" }); </script> </head> <body> <textarea name="text" id="text" ></textarea> </body> </html> <script> setTimeout("tinyMCE.get('text').setContent('<span>texxxte de test</span>') ;",1000); </script>
ça pourra être mieu si on mettre le code pour remplir le tinyMCE après l'exécution de tout le javascript , mais je ne sait pas comment faire avec jquery , ça ne se fera pas avec document.reday

En tout cas c'est résolu avec cette solution.

11/08/2017, 09h27
idis007

Je ouvre le sujet car j'ai eu le même problème, si vous etes comme moi et que vous utilise un framwork telque symfony2.8 dans lequel vous avez défini au préalable les configuration TinyCME

vous pouvez juste dans votre script (jquery)

Code:

tinyMCE.get('text').setContent('<span>votre code html a insérer dans le textArea</span>') ;

je précise que :

Code:

get('text') // text est le name de votre champs html qui est dans votre textArea

Et normalement il va l'inserer directement. sans besoin d'utiliser le setTimeOut