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 !

49 commentaires ont été ajoutés, ajoutez le vôtre.

Vous pouvez laisser un commentaire, cependant je ne peux pas vous garantir qu'il sera modéré rapidement ou qu'il aura une réponse, faute de temps pour m'occuper du site.

  1. Kakou

    Bonjour,

    J’ai suivis le tutoriel à la lettre mais quand j’accède à ma page administration, elle est vide :/

    Il n’y as plus rien oO

    Je sais pas ou est mon erreur

    Si vous pourriez m’éclaircir

    Cordialement,

    • Madrzejewski Alexis

      Bonjour Kabou,

      Je n’ai jamais eu ce genre de problème, je vous recommande de vérifier les différents chemin pour inclure TinyMCE et aussi de regarder s’il n’y a pas d’erreur de syntaxe. Généralement, une page vide peut être synonyme d’une balise ouverte non fermé (il cherche la balise de terminaison qui n’existe plus, donc page vide). Ceci dit, c’est bizarre, avec HTML ça passe pourtant très bien même avec ce genre d’erreurs.

  2. Développeur web

    Merci pour ce tuto. Ça m’a bien aidé à démarrer pour installer tinyMce.

    J’ai du modifié le code car ça fonctionnait soit sur tous les textareas, soit pas du tout. Et je voulais cibler un text area.

    J’ai juste déplacé :
    mode : « exact »,
    elements : « n_text », // le nom de votre texterea

    dans la fonction qui initialise tinyMCE.

  3. robertdelord

    Bonjour, je construit des petits sites web, et jusqu’à présent j’ai créé pour chaque site un administrateur dans lequel j’ai intégré CKEDITOR. Comme je trouve que CKEDITOR ne fonctionne pas toujours très bien, j’ai voulu essayer d’intégrer tinyMCE, je me suis servi de vos explications, j’ai trouvé qu’elles étaient claires avec en plus la vidéo c’est bien. Mais, d’une part je n’arrive pas à afficher les 3 lignes d’outils dans mon textarea (je précise que le chemin indiqué pour le fichier tiny_mce.js est bon car je fais un test sur l’existance de ce fichier en utilisant le chemin complet) donc je ne comprends pas pourquoi dans mon textarea je n’ai rien. De plus, je voudrais faire afficher dans ce textaerea une variable que j’ai chargée suite à l’accès aux bases sql et dans le javascript je n’y arrive pas.
    Comme on ne peut pas mettre de code php je ne sais pas si vous allez pouvoir m’aider.
    Je ne peux pas saisir de site internet car d’une part je travaille pour le moment en local et ensuite sur le réseau il s’agit de l’administrateur de site !!!!
    Merci pour votre aide.

  4. DevPHP

    Je réveille le tuto j’en suis désolé ^^
    Je ne suis pas d’accord sur le fait de protéger en créant un textarea via le javascript, car n’importe qui peu créé ce même textarea en local afin de l’utiliser pour faire des injections.

    Il existe une solution pratique, utilisé TinyMCE avec un plugin (inclus de base).

    Voici la page: http://www.tinymce.com/wiki.php/Plugin:bbcode

    Le code envoyé via TinyMCE et le formulaire du dit hacker, devrons être protégé.

    un simple htmlentities(addslashes($_POST[‘message’]), ENT_NOQUOTES, ‘utf-8’); pour protéger l’entré de donnée et un stripslashes($var); pour ceux écrites sur le site, suivi du décodage du BBCODE en HTML et le tour est joué

    Function bbcode: https://github.com/crystal-web/CMS-for-Developer-PHP/blob/master/application/function/bbcode.php

    Bonne continuation, DevPHP

    • Madrzejewski Alexis

      Salut,

      Merci pour les précisions, à l’époque je n’étais pas super à l’aise de ce côté 🙂

      • DevPHP

        Y-a-pas de mal ^^

  5. franky

    Salut,
    merci pour le tuto, par contre j’aimerais savoir comment integrer un champs « pieces jointe » afin de joindre mes fichier au message à tinyMCE

    Merci d’avance,

  6. clode

    Comment fait on pour changer les textes en anglais ( fonts .. et autres )par du français
    merci

    • Melchi

      Il faut chercher sur le site officiel de TinyMCE les modules de langue française et les téléchrger. Et mettre language: »fr »

  7. Melchi

    Merci Alexis, moi j’enregistre dans un champ de type text, mais quand je veux afficher sur la page les ça vient avec les codes. Je vais continuer à essayer. Merci encore

  8. Melchi

    Bonjours Alexis, tu peux me dire comment tu crée ta base de données que tu utlise dans le tuto? Puisque j’essaie de suivre tes instructions et je ne vois pas pourquoi quand j’enregistre et que je cherche ce qui se trouve dans mas base de données, les balises restent. Par contre si j’utilise tinymce sans l’enregistrement dans la base de données ça marche très bien. Merci

    • Madrzejewski Alexis

      Bonjour Melchi,

      Malheureusement ça va faire un petit bout de temps que j’ai fait ce tutoriel et je n’ai plus les sources/BDD. Tout ce qu’il me reste est dans cet article.

      Cependant, me connaissant, ça doit être assez simple. Généralement j’utilise un type « tinytext » ou « mediumtext » pour stocker des informations tels que des commentaires ou un article issue de TinyMCE.

  9. elrick

    Salut,
    merci pour le tuto, par contre je souhaite avoir deux instance de tinymce sur la même page dans deux langue différentes la première en allemand et la deuxième en français, malheureusement la première instance ne charge pas les langues et met les place.holder a la place. quelqu’un sait comment configurer la bête ?

    Merci d’avance,
    Elrick