picture picture
septembre 22, 2017 JavaScript, PHP 0 Commentaire

[Tiny MCE] Installer un éditeur de texte en mode avancé

C’est une demande récurrente de clients : « Faites-moi un champ de saisie de texte où on peut mettre du gras, de l’italique, des listes et des couleurs, comme Word« … L’objectif étant bien entendu de récupérer cette mise en forme, en général pour la stocker dans une base des données.

HTML ne permettant pas ce type de fantaisies, il faut donc se tourner vers les « éditeurs de texte » open-source. Il y en a quelques uns, je présente ici l’intégration de Tiny-MCE. C’est à la fois l’un des plus abouti, et des plus simple d’utilisation. C’est celui qu’a choisi le N°1 des moteur de blog (WordPress) : ce n’est pas pour rien…

Il y a quelques années j’avais fait un article sur l’intégration de Tiny-MCE en mode simple, celui-ci portera sur le mode avancé (qui propose beaucoup plus d’options de formatage à l’utilisateur)

Depuis le version 4, Tiny MCE vous propose de fonction soit en mode « Cloud » (les fichiers sont stockés sur internet), soit en mode local, les fichiers étant stockés sur votre ordinateur.

Mode Cloud

C’est d’une simplicité angélique, en 3 temps !

1. Intégrez entre les balise <head> et </head> le code d’appel suivant:

  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script>tinymce.init({ selector:'textarea' });</script>
									

2. Créez un formulaire et intégrez un champ de texte multi-ligne (textarea) ordinaire

<form action="traitement.php" metho="post">
       [...]
       <textarea name="CeQueVousVoulez"> 
									

3. Déclarez le site sur lequel vous utilisez l’éditeur en créant ce qu’il appellent une « API-Key » à l’adresse suivante : https://store.ephox.com/signup/
Hop ! C’est fini : vous avez un éditeur qui ressemble à ceci :
Personnellement je ne suis pas très fan de cette méthode, qui rend dépendant d’un prestataire externe, et surtout nécessite un petit laps de temps inesthétique pour charger l’éditeur à l’ouverture de la page (si vous avez une connexion lente cela peut même devenir gênant)
Cela dit, les possibilités de personnalisation sont énormes, si l’anglais ne vous rebute pas vous trouvrez toute la documentation ici.

Méthode locale

Passons aux choses sérieuses !
Pour installer Tiny-MCE en local sans lien vers le cloud, il faut commencer par télécharger les fichiers de la version 3.5 (la plus récente). Vous pouvez les télécharger sur le site de l’éditeur (https://www.tinymce.com/download/older-releases/ > bas de la page > version 3.5), ou ici

Dossier

Après avoir décompressé l’archive, il vous faut déposer le dossier « tiny_mce » où vous voulez sur votre serveur. Dans cet exemple il sera sur la racine par commodité.

Formulaire

Étape suivante : créer dans le formulaire de votre page. Il s’agit d’un champ textarea classique, en n’oubliant pas de lui attribuer un attribut « id=*** » puisque Tiny-MCE est un éditeur JavaScript qui en a besoin comme marqueur du champ textarea à modifier. Au passage vous pouvez mettre plusieurs éditeurs pas page puisque chacun a un id distinct. Exemple (avec 2 éditeur sur la même page) :

<form action="traitement.php" metho="post">
  [...]
  <p><label for="commentaire1" > <strong>COMMENTAIRE 1</strong> </label></p>
  <p><textarea id="commentaire1" name="Commentaire1" rows="5" cols="53"></p>
  <p><label for="commentaire2" > <strong>COMMENTAIRE 2</strong> </label></p>
  <p><textarea id="commentaire2" name="Commentaire2" rows="5" cols="53"></p>
  [...]
</form>
									

Javascript

Dernière étape : insérer sur la page une fonction JavaScript qui permettra à votre champ textarea de communiquer avec TinyMCE. Je recommande de mettre ces scripts en bas de page pour ne pas pénaliser le chargement et l’affichage de la page, mais il est possible de la mettre entre <head> et </head>. Exemple :

<!-- TinyMCE -->
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
  tinyMCE.init({
    // type de mode
    mode : "exact", 
    // id ou class, des textareas appelés
    elements : "commentaire1,commentaire2", 
    // en mode avancé, cela permet de choisir les plugins
    theme : "advanced", 
    // langue
    language : "fr", 
    // liste des plugins
    theme_advanced_toolbar_location : "top",
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,sup,forecolor,separator,"
    + "justifyleft,justifycenter,justifyright,justifyfull,formatselect,"
    + "bullist,numlist,outdent,indent,separator,cleanup,|,undo,redo,|,",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    height:"250px",
    width:"600px"
  });
</script>
									

N’oubliez pas de personnaliser le chemin relatif de tiny_mce.js sur le serveur, et les noms des ID des éditeurs (ici : commentaire1, commentaire2)
La liste des boutons est importantes, dans cet exemple je me suis cantonnée aux principaux (qui suffisent dans 95% des cas). Si vous souhaitiez en intégrer plus, voici la liste complète :
  • bold
  • italic
  • underline
  • strikethrough
  • justifyleft
  • justifycenter
  • justifyright
  • justifyfull
  • bullist
  • numlist
  • outdent
  • indent
  • cut
  • copy
  • paste
  • undo
  • redo
  • link
  • unlink
  • image
  • cleanup
  • help
  • code
  • hr
  • removeformat
  • formatselect
  • fontselect
  • fontsizeselect
  • styleselect
  • sub
  • sup
  • forecolor
  • backcolor
  • forecolorpicker
  • backcolorpicker
  • charmap
  • visualaid
  • anchor
  • newdocument
  • blockquote
  • separator ( | is possible as separator, too/)

 Récupérer les variables

Pour la méthode Cloud, comme pour la méthode locale, la récupération des saisies formatées en HTML est très simple : elles sont incluses dans la variable $_POST[‘name_du_textarea’] (ou GET le cas échéant). Il suffit donc de les traiter dans le fichier PHP destinataire du formulaire ( « traitement.php » dans mon exemple), comme n’importe quelle autre variable.
That’s all Folk :-)

No Responses to “[Tiny MCE] Installer un éditeur de texte en mode avancé”

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: