Intégration de tinyMCE

Un nouveau tutoriel, cette fois ci c’est un peu différent, puisque c’est le premier tutoriel sur de la « programmation web ». Je le trouve un peu laborieux, c’est mon premier essai, donc veuillez m’excuser. Dans ce tutoriel nous allons voir comment intégré tinyMCE dans un de vos formulaire contenant un texterea. Grâce a tinyMCE, un visiteur pourra mettre en forme son texte, ajouter des smiley, etc…. L’avantage c’est que ça se présente sous forme d’une « interface graphique », un peu comme dans un traitement de texte. Sans plus attendre, la vidéo :

Avec l’aide de la vidéo vous savez comment intégré tinyMCE, mais je vais vous donner les codes (ça vous évitera de tout recopier) et quelques informations supplémentaires.

Pour commencer, le site officiel : http://tinymce.moxiecode.com/
Ensuite, les codes que j’utilise dans la vidéo (à insérer entre les balises head):

Intégration de tinyMCE (faites attention au chemins) :

<script src="modules/Tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"><!--mce:0--></script>

Paramétrage de tinyMCE (comme le code est assez long, j’ai préféré le « caché », pour l’afficher cliqué sur la barre) :

<script type="text/javascript"> 
tinyMCE.init({ 
mode : "exact", 
elements : "n_text", // le nom de votre texterea
theme : "advanced", // le thème choisi pour l'éditeur, laissez advanced si vous voulez avoir tous les choix de plugins etc.... 
language : "fr", // langue
plugins : "advimage,fullscreen,preview,emotions,insertdatetime,save", //les plugins que vous allez utiliser
//les barres de boutons de 1 à 3
theme_advanced_buttons1 : 
"bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,sub,sup,charmap,|,undo,redo,|,outdent,indent,|,link,unlink,save,|,insertdate", 
theme_advanced_buttons2 : 
"forecolor,backcolor,|,fontsizeselect,fontselect,formatselect,|,image,emotions,|,cleanup,removeformat,|,fullscreen,preview", 
theme_advanced_buttons3 : "", 
//
theme_advanced_toolbar_location : "top", //où se place la toolbar,
theme_advanced_toolbar_align : "left", //l'alignement de celle ci
theme_advanced_statusbar_location : "bottom", //Où se positionnera la barre de statut
content_css : "../templates/TinyMCE.css", //lien vers le css utilisé
plugin_insertdate_dateFormat : "%d/%m/%Y", // le format de la date pour le plugin insertdatetime
plugin_insertdate_timeFormat : "%H:%M:%S",  //pareil sauf que c'est le format de l'heure
 
//les attributs autorisé pour les balises citées. Exemple, la balise hr n'acceptera que les attributs class, widht, size et noshade
extended_valid_elements : 
"hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],a[href|name]", 
//
theme_advanced_resize_horizontal : true, //redimensionnement horizontal (oui ou non). 
theme_advanced_resizing : true //redimensionnement vertical (oui ou non)
}); 
</script>

Et enfin, un dernier code important, il permet de créer un texterea en javascript (comme ça, si un malin désactive javascript pour injecté du code malveillant, le texterea ne sera pas créé et son attaque sera bloqué) :

	
<span id="content_placeholder"></span>
<script language="javascript" type="text/javascript">
  with (document.getElementById ("content_placeholder")) {
    with (appendChild (document.createElement ("TEXTAREA"))) {
      name = "nom_du_textarea";
      cols = 80;
      rows = 25;
      value = "texte_par_defaut";
    }
  }
//-->
</script>
<noscript>
  The editor requires scripting to be enabled.
</noscript>
<noscript>mce:3</noscript>

Dans ce dernier code, vous pouvez régler la longueur de votre formulaire avec « cols et rows », dans « name » vous mettez le nom du textarea, et dans « value » le texte à afficher par défaut à l’intérieur du textarea (pour guider un visiteur par exemple).

Voila, le tutoriel est fini, si j’ai oublié quelques choses ou que vous avez des questions laissez un commentaire (ou allez faire un tour sur le forum) et j’y répondrais !