Intégrer l'éditeur tinyMCE dans son site

Dans cet article, je vais vous présenter comment intégrer l'éditeur de texte riche tinyMCE dans votre site internet. Le but d'un éditeur de texte riche est de proposer une solution WYSIWYG, afin que vos utilisateurs puissent rédiger sur votre site sans utiliser des langages de description de contenu comme le markdown ou le bbcode.

L'intégration de tinyMCE peut paraitre extrêmement simple au premier abord, mais elle n'en reste pas moins complexe dès qu'on souhaite pousser l'intégration.

Téléchargement et installation de tinyMCE

Pour pouvoir télécharger tinyMCE, je ne peux que vous conseiller de vous rendre sur le site officiel : http://www.tinymce.com.

L'utilitaire est proposé en trois versions :

  • Une version standard pour une utilisation en production.
  • Une version sous forme de module pour jquery.
  • Une version pour faire du développement de module (contrairement aux deux autres versions, le code javascript est disponible en version non minifiée).

 Personnellement, utilisant jquery sur mon site, j'ai récupéré la deuxième version, mais rien ne vous empêche de choisir la première si vous n'utilisez pas cette librairie.

L'installation basique de la librairie est d'une extrême simplicité, dezipper le répertoire tinymce/js/tinymce dans votre arborescence web (dans un dossier nommé tinymce par exemple) puis il est possible de remplacer un élément html (via un sélecteur css) par l'éditeur riche. Par exemple, pour transformer un textarea ayant l'id mon_editeur, il faudra utiliser le code suivant :



 

On se rend bien compte, qu'il n'y a rien de compliqué ici. Si vous utilisez la version jquery, voici le code ayant le même résultat :



 

 

Encore une fois, rien de bien compliqué ici, on sélectionne l'élement via son id et on appelle dessus la fonction tinymce en lui précisant le chemin du script tinyMCE.

On obtient alors un éditeur simple ressemblant à ceci :

image utilisateur

Il est maintenant temps de faire quelques modifications afin d'adapter celui-ci à nos besoins clin.png.

Personnalisation de tinyMCE

TinyMCE propose un certain nombre d'options de configuration afin d'adapter l'éditeur à vos besoins notamment via des plugins. Par défaut TinyMCE en propose une quarantaine, mais vous pouvez bien évidemment développer les vôtres pour intégrer certaines fonctionnalités spécifiques de vos sites à l'éditeur.

Je vous propose de commencer par changer la langue de l'éditeur, par défaut, les menus sont en anglais, mais il est bien évidemment possible de traduire l'éditeur dans d'autres langues (liste disponible ici clin.png). Pour cela téléchargez le fichier de langue puis placez-le dans le répertoire langs. Dans la configuration de votre module, vous devrez alors ajouter une ligne pour sélectionner la langue :

tinymce.init({
	selector:'#mon_editeur',
	language: 'fr_FR'
});

Vous obtenez alors un formulaire complètement traduit en français.

Vous pouvez bien entendu ajouter d'autres modules que ce présent par défaut via le paramètre plugins. Par exemple pour ajouter l'utilitaire des gestion des liens et des images à votre éditeur, adaptez la configuration comme ceci :

tinymce.init({
	selector:'#mon_editeur',
	plugins: 'link image',
	language: 'fr_FR'
});

Pour obtenir une liste des plugins disponibles, rendez-vous dans le dossier plugins de votre installation tinyMCE.

Maintenant que nous avons vu les deux plus importants paramètres de configuration, je vous propose ci-dessous ma configuration avec commentaire à l'appui afin de vous permettre de configurer finement votre installation :

tinymce.init({
	selector:'#mon_editeur',
	plugins: 'link image code',
	language: 'fr_FR',
	content_css: "style/tinymce.css", /* Change le style du contenu de l'éditeur */
	toolbar: "styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | image | code", /* Liste les éléments à faire apparaitre dans la toolbar dans l'ordre voulu */
	menubar : false, /* Retire la barre de menu */
	theme_advanced_blockformats:"h1,h2,h3,h4,h5,h6" /* Désactive les boutons d'ajout de titre */
});

Et voici le résultat :

image utilisateur

 

Voilà, j'espère que cette petite introduction à tinyMCE vous sera utile et j'espère revenir très vite pour écrire un autre article hihi.png.

L'auteur

Toshy

Passionné par l'informatique depuis mon plus jeune age, j'anime un blog sur le développement web et les différents domaines qui s'y attachent : administration système, bonne pratique de développement, framework web.
Je suis développeur web de profession, diplômé d'un DUT d'informatique, je travaille actuellement au sein du service informatique d'une université.