tinyMce : remplir l'éditeur via javascript [Résolu]

betadev · 10/01/2011, 14h17

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 :

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

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.

BaBeuH · 10/01/2011, 15h04

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 :

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

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 :

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

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+

betadev · 10/01/2011, 15h25

Merci pour ton aide.

Si , j'ai mis mon champs textarea

Code :

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

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

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

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

BaBeuH · 10/01/2011, 15h32

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

Que donne le code suivant :

Code :

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

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

dans ton document.ready ? undefined ou [object Object] ?

betadev · 10/01/2011, 15h43

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.

BaBeuH · 10/01/2011, 15h52

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 ?

betadev · 10/01/2011, 16h00

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.

BaBeuH · 10/01/2011, 16h02

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

betadev · 10/01/2011, 16h16

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.

betadev · 10/01/2011, 22h28

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

Code :

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

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.

10/01/2011, 15h32	#4
BaBeuH Membre actif Inscription : juin 2004 Messages : 152 Détails du profil Informations forums : Inscription : juin 2004 Messages : 152 Points : 154 Points : 154	Est-ce que le tinyMCE.get("...") te renvoie bien une instance tinyMCE ? Que donne le code suivant : Code : Sélectionner tout - Visualiser dans une fenêtre à part alert(tinyMCE.get('text')); dans ton document.ready ? undefined ou [object Object] ?
	00

10/01/2011, 15h43	#5
betadev Membre du Club Développeur Web Inscription : octobre 2008 Messages : 80 Détails du profil Informations personnelles : Sexe : Âge : 27 Localisation : Tunisie Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : octobre 2008 Messages : 80 Points : 56 Points : 56	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.
	00

10/01/2011, 15h52	#6
BaBeuH Membre actif Inscription : juin 2004 Messages : 152 Détails du profil Informations forums : Inscription : juin 2004 Messages : 152 Points : 154 Points : 154	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 ?
	00

10/01/2011, 16h00	#7
betadev Membre du Club Développeur Web Inscription : octobre 2008 Messages : 80 Détails du profil Informations personnelles : Sexe : Âge : 27 Localisation : Tunisie Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : octobre 2008 Messages : 80 Points : 56 Points : 56	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.
	00

10/01/2011, 16h02	#8
BaBeuH Membre actif Inscription : juin 2004 Messages : 152 Détails du profil Informations forums : Inscription : juin 2004 Messages : 152 Points : 154 Points : 154	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"...
	00

10/01/2011, 16h16	#9
betadev Membre du Club Développeur Web Inscription : octobre 2008 Messages : 80 Détails du profil Informations personnelles : Sexe : Âge : 27 Localisation : Tunisie Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : octobre 2008 Messages : 80 Points : 56 Points : 56	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.
	00

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