Chargement et enregistrement dynamique de TinyMCE

mimi — Sun, 11 Feb 2007 13:02:00 +0100

Pour certains de nos clients, j'ai utilisé tinyMCE pour que ces derniers puissent modifier leurs pages, parmi les différents éditeurs de texte wysiwyg , nous avons choisi d'utiliser tinyMCE, simple à mettre en place, et riche en fonctionnalités. De plus, avec l'avènement des technologies web 2.0 et en particulier d'AJAX , nous utilisons pour les sites de nos clients le framework Javascript YUI (Yahoo User Interface).

Je ne détaillerais pas ici l'utilisation de YUI, ni de tinyMCE, pour cela je vous invite à lire les documentations ...

Du coup certains réglages s'imposent car la majorité du traitement de la page se fait maintenant coté client.
L'objet de cet article est donc d'expliquer comment charger de façon dynamique tinyMCE, en Javascript.

Intégration des scripts

La première chose à faire, est donc d'intégrer les fichiers js à votre page web:

Vous remarquerez que là je n'utilise pas encore YUI, mais seulement tinyMCE
J'insère aussi un fichier à moi : "myScripts.js", c'est dans ce script que je placerais mes fonctions JS.

Configuration de TinyMCE

TinyMCE possède une floppée de réglages, je vous invite à lire la documentation pour personnaliser votre éditeur ...
Dans cet exemple j'utiliserais la configuration suivante :

Mise en place du chargement dynamique

On va ensuite creer une simple page web qui sur le clique d'un bouton, affche l'éditeur TinyMCE : Exemple 1
Code source de la page web :

Code source du fichier myScripts.js :

Voilà, un clique sur le bouton et tinyMCE se lance : Exemple 1
C'est un bon début, mais il il faut aussi pouvoir fermer l'&ecaute;diteur, et récupérer le contenu ... Nous allons donc rajouter une fonction qui ferme l'éditeur ainsi qu'un bouton qui execute cette nouvelle fonction
Code de la page web :

Et celui du fichier myScripts.js :

Voir l'exemple 2 : Exemple 2

Donc maintenant, un clique sur le bouton "Lancer tinyMCE" va ouvrir l'éditeur, et si vous tapez du texte dans l'éditeur, puis vous cliquez sur "Fermer tinyMCE", vous verrez votre texte dans s'afficher dans le div ...
De plus vous réaliserez qu'un second clique (apres avoir fait les étapes précédentes) sur "Lancer tinyMCE" vous aurez le contenu du div dans l'éditeur, c'est une fonctionnalité propre à tinyMCE.
Un bémol cependant, si vous faites plusieurs cliques sur "Fermer tinyMCE" sans avoir au préalable ouvert l'éditeur, vous allez perdre le contenu de votre div ...
Pour remedier à ce problème, j'utilise une variable "globale" qui me donnera l'état de l'éditeur. Le code de la page html n'est pas modifier, par contre voici le code du fichier Javascript :

Voir l'exemple 3 : Exemple 3

Ma variable : tinyMCE_on, est initialisée à "false", car lors du lancement de la page l'éditeur n'est pas actif, ensuite, dès que j'initialise l'éditeur, je change la valeur de cette variable à "true" car l'éditeur est ouvert.
Puis, lorsque je ferme tinyMCE, je repasse la valeur false à ma variable ... et ainsi de suite. Du coup plusieurs cliques sur "Fermer TinyMCE" ne changeront pas le contenu de mon div !

Sauvegarder le contenu en AJAX

Mise en place

Notre exemple est pas mal, mais ce serait quand même mieux, de pouvoir enregistrer les modification coté serveur, du coup nous utiliserons YUI pour poster le contenu de l'éditeur sur le serveur en AJAX.
Le truc, c'est que le contenu peut être relativement volumineux il est donc préférable d'utilser la méthode "POST" pour envoyer les infos au serveur.

Nous devons, dans un premier temps, inclure les fichiers nécessaires à YUI :

J'ai donc simplement rajouté le fichier yahoo.js qui initialise YUI, et connection.js qui permet d'utiliser AJAX.
Etant donné su'il est préférable d'utiliser "POST" il faut donc créer un fomulaire sur notre page, voici le contenu de la page web :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TinyMCE : Exemple 4 : Utilisation d'AJAX</title>
<script type="text/javascript" src="http://www.theodys.org/index.php/post/2007/02/11/./scripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="http://www.theodys.org/index.php/post/2007/02/11/./scripts/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="http://www.theodys.org/index.php/post/2007/02/11/./scripts/yui/build/connection/connection.js"></script>
<script type="text/javascript" src="http://www.theodys.org/index.php/post/2007/02/11/./scripts/myScripts.js"></script>
</head>
<body>
<h1>Exemple 4 : TinyMCE et AJAX</h1>
<form id="myFormExample" method="POST">
<input type="button" value="Lancer TinyMCE" onclick="lanceTinyMCE();" /> - <input type="button" value="Fermer TinyMCE" onclick="closeTinyMCE();" />
<textarea name="myContent" id="myTinyMCE" style="visibility:hidden;"></textarea>
</form>
<div id="contenuAfficher"></div>
</body>
</html>

Vous remarquerez, qu'au lieu d'utiliser un div pour afficher l'éditeur, j'utilse maintenant un "textarea" plutôt q'un "div".
De plus, je rajoute du style à la balise pour cacher le textarea par défaut, ensuite j'ai rajouté un div pour pouvoir afficher le contenu de l'éditeur.
Une chose importante, il n'y a pas d'attribut "action" dans mon fomulaire, car l'envoie du fomulaire se fera en AJAX.
Il faut maintenant modifier un peut le code JavaScript pour gérer notre nouvelle configuration :

Voir l'exemple 4 : Exemple 4

NOTE DE MISE A JOUR:
A partir de la version 3.0 de TinyMCE, il ne faut plus utiliser la ligne :
tinyMCE.getContent();
mais :
tinyMCE.activeEditor.getContent();

Vous remarquerez ici, que la seule chose que j'ai modifié sont les deux lignes suivantes :

En gros je place le contenu de l'éditeur à la fois dans le textarea et dans le div, le textarea pour pouvoir poster mon formulaire, et le div pour simplement afficher le contenu !

Envoi du formulaire

Là, j'ai deux solutions, soit j'envoi directement le contenu à mon script php lors de la fermeture de tinyMCE, soit je cré un autre bouton pour transmettre le document créé au serveur, nous allons utiliser la première solution :

Modifions notre fichier JavaScript :

tinyMCE.init({
mode : "none",
theme : "advanced",
language: "fr",
width:"650px",
relative_urls : false,
height:"500px",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
});
var tinyMCE_on = false;
function lanceTinyMCE()
{
tinyMCE.execCommand("mceAddControl", false, "myTinyMCE");
tinyMCE_on = true;
}
function closeTinyMCE()
{
if (tinyMCE_on)
{
// On recupere le contenu :
var contenu = tinyMCE.getContent();
// On ferme tinyMCE
tinyMCE.execCommand("mceRemoveControl", false, "myTinyMCE");
tinyMCE_on = false;
// on place le contenu dans le textarea
document.getElementById("myTinyMCE").value = contenu;
// On appelle la fonction d'envoie du formulaire :
postFormulaire();
//on affiche le contenu dans le div ...
document.getElementById("contenuAfficher").innerHTML = contenu;
}
}
function postFormulaire()
{
// on recupere le fomulaire
var monFormulaire = document.getElementById('myFormExample');
// on le defini pour l'envoie à YAHOO
YAHOO.util.Connect.setForm(monFormulaire);
// on l'envoie
YAHOO.util.Connect.asyncRequest('POST', 'example5.php', callBack);
}
var callBack= {
success:function(o){
alert(o.responseText);
},
failure:function(o){
alert("Erreur, lors de l'échange avec le serveur");
}
}

Voici le code PHP, du fichier example5.php :

Voir l'exemple 5 : Exemple 5

Voilà, vous pouvez maintenant personnaliser le code à votre convenance pour correspondre au mieux à vos besoins.

Conclusion

Ce petit est donc maintenant terminé !
Laissez moi vos commentaires !

Theodys.org - AJAX