Remplir l'éditeur via javascript

**betadev** · 10/01/2011, 15h17

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, 16h04

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, 16h25

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, 16h32

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, 16h43

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, 16h52

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 ?

Remplir l'éditeur via javascript [TinyMCE]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager