14 novembre 2012
Category:
Wordpress
Comments: 1

Éditeur HTML / Visuel de WordPress

Le CMS Wordpres est devenu célèbre pour de multiples raisons, par exemple pour la facilité à modifier un thème, ou encore le catalogue très impressionnant de plugins qu’ils proposent de manière gratuite. Fort d’une communauté très large et qui s’agrandit chaque de manière exponentielle. Si on a besoin d’un plugin ou autres composants, on trouvera certainement une discussion qui a déjà trouvé sa solution sur le net. Et pourtant l’un des composant, qui arrive nativement avec WordPress, et dont peu de discussion font l’objet, c’est certainement l’éditeur de texte ! Et pourtant nombreux d’entre nous ce sont cassés les dents lors d’une tentative de mise en page avancée via cet éditeur, qui remets en forme à sa guise les contenus, et qui est pourtant le plugin le plus utilisé par tous les propriétaires d’un site sous WordPress. Dans cet article, vous trouverez les points positifs / négatifs que l’on a noté de cet éditeur, et des alternatives à ce plugin.

L’éditeur TinyMCE actuel :

Si vous utilisez WordPress depuis quelques temps, et si vous avez une utilisation avancée de celui-ci, vous avez déjà certainement été bloqué par le manque de liberté / créativité qu’il propose et de la façon dont il fonctionne.

Pourtant cet éditeur arrive à satisfaire la plus grande partie des utilisateurs de wordpress, simple, conviviale, mais dites moi comment insérer un tableau facilement ? Comment me laisser utiliser les balises <div>, <br /> librement  ??? Et on ne parle pas du mode plein écran …

Pour résumé, l’éditeur TinyMCE d’origine est parfait pour un utilisateur qui n’a pas de grandes demandes sur la mise en page de ses articles, mais devient rapidement « galère » lorsqu’il s’agit d’utiliser des fonctions avancées. En conséquences, il nous faut installer un plugin plus perfectionner pour nous permettre d’avoir un contenu plus surprenant !

Ajouter des fonctions à l’éditeur visuel de wordpress :

1 – Raccourcis Clavier

Pour gagner du temps, et améliorer la productivité, l’utilisation de raccourcis clavier est fréquente, que ce soit lors d’une navigation sur le web, de l’utilisation d’un traitement de texte, mais saviez vous que l’éditeur de WordPress, dispose également de raccourcis. Il est toujours bon de jeter un coup d’oeil sur ce tableau pour se familiariser avec quelques un d’entre eux.

2 – La barre d’outils

Au cas où vous ne seriez pas au courant, comme il m’est arrivé de me prendre régulièrement la tête avec … bref … il existe un bouton à l’extrême droit de cette barre, sur la première ligne, qui vous permettra de faire apparaitre de nouvelles fonctionnalités sur une deuxième ligne.

Cette deuxième ligne, surnommée « Kitchen Sink » ( je ne me risquerais pas à traduire … ) offre de nouvelles fonctions tels que la couleur de police, le souligné, l’alignement du texte et autres boutons de style.

3 – Boutons supplémentaires

Malgré ces nouvelles fonctions sur la deuxième ligne de notre barre d’outils, il nous manque tout de même quelques options qui nous permettrait de tirer un meilleur parti de l’éditeur. On peut alors un code pour ajouter de nouveaux boutons, et donc des fonctions supplémentaires sur notre barre d’outils.

Quels boutons ajouter ? En voici quelques uns :

  • justifier à gauche / justifier au centre / justifier à droite
  • Image
  • Aide
  • Code
  • <H>
  • Couleur de premier plan / Couleur d’arrière plan
  • etc …

Pour ajouter ces boutons, vous devez éditer le fichier « functions.php » de votre thème, puis y placer le code suivant :

Le code ci-dessus va alors ajouter le bouton de sélection de font sur la première ligne de la barre d’outils. Si vous souhaitez ajouter un bouton à la deuxième ligne (ou même sur une troisième ligne de la barre d’outils), remplacer sur la dernière ligne « mce_buttons » par « mce_buttons_2 » ou « mce_buttons_3 » …

Utilisez plus de fonctions que l’éditeur actuel :

Vous maîtrisé parfaitement l’utilisation de TinyMCE, et vous souhaitez en faire plus, et bien pourquoi ne pas se tourner vers l’excellent catalogues de plugins !

1 – CKEditor

Si vous êtes réellement agacé par TinyMCE, ce plugin va peut être vous détendre quelques minutes, il remplacera l’éditeur TinyMCE par un éditeur WYSIWIG qui vous donnera un peu plus de liberté … Cet éditeur s’intègre parfaitement à la barre d’outils et vous offre des fonctionnalités supplémentaires, par exemple pour les médias, en ajoutant de nouveaux boutons.

Vous pouvez consulter une démo du plugin ici .

2 – Ultimate TinyMCE

Ce plugin vous permets d’ajouter un très grand nombres de boutons à vos barres d’outils, sans aller toucher au code de votre thème. Changement de police, changement de couleur, style du texte, etc … sans jamais toucher au code HTML de votre article/page.

Une vidéo est consultable en ligne pour en savoir plus au sujet de cet éditeur.

 

Ce plugin dispose de ses propres raccourcis, d’une aide en ligne, et peut être améliorer par une version PRO. Toutefois, si vous avez un peu de patiente et que vous utilisez la syntaxe que j’ai mentionné au dessus, vous devriez pouvoir obtenir toutes les fonctionnalités que ce plugin a à offre, même avec la version gratuite …

3 – TinyMCE Advanced

Ce plugin améliore l’éditeur de base en y ajoutant des boutons tels que « Rechercher » / « Remplacer », l’insertion simple de tableau et menu contextuel, date et heure, caractères visuels ainsi que des suppléments XHTML.

Si vous recherchez un éditeur légèrement amélioré et que vous n’avez pas le temps d’ajouter des lignes de codes pour obtenir des boutons supplémentaires, ce plugin devrait vous convenir parfaitement.

4 – Raw HTML

Si vous êtes fatigué par les fatigués par les reformulations de la mises en page que fait l’éditeur visuel de wordpress, les paragraphes automatiques, la transformation des smileys … ce plugin est l’idéal.

Une fois le plugin installé et activé, tout le texte que vous enfermez entre les balises [raw] et [/raw] ne sera pas réinterprété. Attention toutefois de noter que pour la version gratuite, seul le texte insérer dans la partie HTML entre les balises ne sera pas réinterprété, pour la partie visuel il vous sera nécessaire de faire la mise à jour vers la version PRO.

 5 – Content Editor Templates pour WordPress

Pas vraiment un éditeur de texte, mais plutôt un outils qui vous permets de créer des modèles avec des blocs de contenu, puis ensuite d’insérer dans ces blocs le contenu que vous souhaitez. Un système de template très ingénieux pour vos articles, pages …

A Télécharger ici

Conclusion

En conclusion, en tant que CMS favorisant la création de contenu, on note que l’éditeur visuel de WordPress est une partie à ne pas négliger de ce CMS. Avez vous apporter vos propres réglages à ce plugins ? Avez vous des idées pour améliorer ce plugin ? Quel est votre relation / utilisation de ce plugin ? N’hésitez pas à nous faire partager vos avis dans les commentaires ci-dessous.

 



Une réponse pour “Éditeur HTML / Visuel de WordPress

  1. Ahmad dit :

    Ultimate TinyMCE powaa + Crayon Syntax Highlighter pour insérer du code dans les posts.

    Merci pour le comparatif

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *