Dans l’éditeur tinyMCE, lorsqu’on choisit de dérouler le menu de sélection du format, on dispose d’éléments par défaut comme les en-têtes (h1 à h6), l’alignement ou bien même la mise en forme classique comme le « gras », « souligné » ou « italique ». Ce menu peut être personnalisé de différentes manières.

La méthode la plus simple reste de redéfinir les styles dans la méthode d’initialisation de l’éditeur. Dans notre cas cela écrasera les valeurs par défaut pour n’afficher que ce qu’on désire.

tinymce.init(
{
 // ...

 toolbar : [ "bold italic underline | styleselect" ]
 style_formats: [
  {title: 'Blocks', items: [
     {title: 'Paragraph', block: 'p'}
  ]},  
  {title: 'Headers', items: [
     {title: 'Header 1', block: 'h1'},
     {title: 'Header 2', block: 'h2'},
     {title: 'Header 3', block: 'h3'},
     {title: 'Header 4', block: 'h4'},
     {title: 'Header 5', block: 'h5'},
     {title: 'Header 6', block: 'h6'}
  ]},     
 ],
 
 // ...
});

Le fait de modifier le contenu de « style_formats » affecte la liste déroulante qui s’affiche quand on ajoute l’option « styleselect » dans la barre d’outils (cfr. paramètre « toolbar« ). Vous constaterez également qu’il est possible de créer plusieurs niveaux (ce qui permet visuellement d’obtenir des sous-menus).

Le paramètre « title » est évidemment essentiel. On y met le texte qui sera affiché à l’utilisateur. Il sera automatiquement traduit en fonction de la langue choisie dans la configuration. Les fichiers de langue sont stockés dans un sous-dossier du répertoire de tinyMCE.

Les autres paramètres qu’on peut définir sont :

• inline : indique le nom de balise inline qui sera utilisé comme conteneur.
• block : indique le type de balise block qui sera utilisé comme conteneur.
• selector : indique à quel élément cela peut s’appliquer.
• classes : indique les classes à associer au résultat.
• styles : pour générer du CSS pour l’élément

Des exemples sont disponibles dans la documentation officielle.

A lire aussi : content formatting