Ajouter TinyMCE dans un plugin WordPress − La Case de l'Oncle Tom

J’ai eu besoin récemment d’inclure un éditeur visuel dans un plugin Wordpress. Je pensais que c’était une tâche aisée sans chercher sur Google : il n’y avait qu’à faire comme les développeurs de Wordpress !

J’ai pensé à tort et ça m’a confirmé une fois de plus que le code source de Wordpress était un joyeux bazar.

Le besoin

Mon besoin était tout bête : sur une seule page de mon plugin, j’avais besoin de transformer un bête champ texte en éditeur avancé avec possibilité d’uploader des images et tout ça.

Avec ce simple besoin, j’ai cependant constaté :

qu’il était pénible de remonter le cheminement logique de l’éditeur jusqu’à l’inclusion des scripts
qu’il n’y a pas de façon standard d’ajouter l’éditeur : il y a bien une fonction wp_tiny_mce mais elle ne fait pas tout … c’est à dire que sans inclure ses dépendances (non documentées), cette fonction n’est d’aucune utilité
qu’on trouve à boire et à manger dans le code de Wordpress. Pour le code is poetry, on est plutôt proche du SMS kikoololesque

Après avoir trouvé ma solution, je suis cependant tombé sur un article expliquant comment inclure TinyMCE dans Wordpress. Elle est juste mais nous verrons que seule la moitié du chemin a été faite avec.

La solution

<?php
add_action('admin_menu', 'include_tinymce');

function include_tinycme()
{
  add_action('admin_head', 'wp_tiny_mce');
  wp_enqueue_script('jquery-ui-core');
  wp_enqueue_script('jquery-ui-tabs');
  wp_enqueue_script('editor');
  wp_enqueue_script('media-upload');
  add_thickbox();
}

Plusieurs remarques par rapport à ce code :

Le choix de l’action
Le mien s’est porté sur admin_menu. Vous pourriez en choisir une autre, du moment qu’elle s’exécute avant admin_head. J’ai choisi celle-là parce que c’est là que j’y construis les menus de l’administration : WordPress est initialisé et n’a pas encore été affiché.
Le choix wp_enqueue_script
J’aurais pu caller cette fonction en tant que filtre de admin_head et utiliser la fonction print_script MAIS je soupçonne cette dernière fonction de ne pas vérifier si un autre script du même nom a été inclus.
J’ai choisi de ne pas créer de conflit : wp_enqueue_script ne chargera qu’1 fois et 1 seule le script nommé. Pas de chichi.
L’inclusion de l’éditeur
Pour afficher l’éditeur, il suffira d’appeler la fonction the_editor() en lieu et place de son textarea. Vous noterez toutefois que vous serez obligé(e)s de nommer l’éditeur content sous peine de devoir ajouter quelques filtres supplémentaires.

Après à vous de vous débrouiller avec l’architecture de votre plugin. Personnellement j’ai tout basculé dans des classes depuis un bon moment pour éviter tout conflit de nom.

La solution optimisée

Cependant ne crions pas victoire si vite : avec ce qu’on a fait, nous avons juste réussi à inclure TinyMCE sur toutes les pages de l’admin WordPress. Ce n’est pas ce que je recommanderai pour deux raisons :

le respect des performances utilisateurs : charger 150Ko de JavaScript pour rien sur une page sans TinyMCE, c’est du gâchis
on ne fait pas une généralité pour une exception

Heureusement pour nous WordPress est bien fichu car il nous fournit 2 variables globales (*hm*) d’exception :

$plugin_page
Cette variable contient le nom de la page renseignée par les méthodes add_management_page() et add_options_page(). On aurait pu passer directement par admin_print_script* mais il faisait flemme d’ajouter une fonction de plus.
Exemple :
```
<?php
add_management_page('Titre', 'Label', 8, 'test_management_page', 'mon_callback');
//$plugin_page vaudra 'test_management_page'
```
$pagenow
Cette variable contient le nom du fichier actuellement exécuté.
Si vous vous trouvez sur wp-admin/tools.php?page=test_management_page, $pagenow vaudra tools.php

Avec ces deux variables, on est capable de charger ce qu’on veut, où on veut et quand on veut.

Au final, ça nous donnerait ceci :

<?php
add_action('admin_menu', 'include_tinymce');

function include_tinycme()
{
  global $plugin_page;
  if ($plugin_page === 'test_management_page')
  {
    add_action('admin_head', 'wp_tiny_mce');
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-tabs');
    wp_enqueue_script('editor');
    wp_enqueue_script('media-upload');
    add_thickbox();
  }
}

Là on a bien terminé le travail.

Conclusion

Il n’y a au final pas grand chose à chose à ajouter pour disposer de TinyMCE. Encore faut-il le savoir.

On peut cependant regretter le manque de flexibilité de cette manipulation :

j’ai definé la liste des fichiers en cherchant les noms de fonctions JavaScript manquantes (merci Firebug et l’affichage des exceptions en console)
la liste des dépendances de wp_enqueue_script n’est absolument pas complète : editor devrait appeler wp_tiny_mce et media-upload (voire jquery-ui-*)

Un jour WordPress nettoiera son code pour faciliter la maintenance …

Commentaires & rétroliens

oncletom (Oncle Tom) dit :

3 février 2009 à 9:18

Ajouter TinyMCE dans un plugin WordPress http://tinyurl.com/ald7vz

Répondre

Sol dit :

3 février 2009 à 12:59

Je pensais que j’étais le seul à trouver le code de wordpress très discutable…

Répondre

prometee dit :

3 février 2009 à 14:33

Je me suis aussi penché sur le fonctionnement et l’intégration de tinymce dans WP 2.6 et sup, il est vrai qu’au premier abord le code semble vraiment confus et non réutilisable facilement dans un autre champ texte. Cependant, j’ai voulu mimer les fonctions de tinyMCE et son intégration dans un autre « CMS perso » et je me suis sans doute heurté au même problématiques que les dévelloppeurs WP du package « editor ».

Il y a pas mal de paramètres à prendre en compte lors de l’intégration d’un éditeur visuel :
– l’attribut name et id du textearea qui accueillera notre texte qui pourra être accéder par de multiples fonctions javascript externe à l’éditeur : comme l’éditeur html de WP ou encore l’upload de fichiers.
– l’i18n facilité par les fonctions de WP et de tinyMCE. Ici le challenge et de pouvoir facilement garder les traductions en un seul et même points (les fichiers *.po/*.mo)
– inclure les scripts js au bons endroits et ne pas les ré-inclure 10 fois dans une même page.
– dimensions, redimensionnement en largeur, etc (faudrait un article complet et que je repasse pas mal de temps sur ce que j’ai fait pour ne rien oublier)
Tout ceci pour dire qu’établir une bête fonction qui regroupe tous ça n’est pas aisé.

Lorsqu’on regarde WP de façon global on peux constater que le code est vraiment poétique, enfin je dirais plutôt bien organisé et facile d’accès. Cependant certaines parties reste néanmoins complexes ou plutôt mal réfléchies. Il ne faut pas oublier que WP est en partie développé par des contributeurs dont les connaissances et l’expérience n’est pas au même niveau que tous les autres développeurs de WP. Mais cette mixité apporte souvent de bonne idées qui méritent d’être creusées.

Mais il est vrai que l’intégration de tinyMCE reste quand même sacrement bordélique…

Répondre

Oncle Tom dit :

4 février 2009 à 16:11

Et pourtant ça serait tellement simple en faisant comme ça :
```
add_action('admin_head', 'wp_tiny_mce', array('content', 'mon_id_de_textarea_perso'));
  register_tinymce_config('mon_id_de_textarea_perso' 'callback_de_config_tinycemce|emplacement fichier');
```
Tu n’utilises qu’un seul point d’entrée pour appeler TinyMCE et les dépendances.
Et la deuxième fonction facilite le chargement de profils de configuration pour ces dits profils.

En fait c’est facile d’accès dès que tu dois pas trop t’intégrer dans l’existant de WordPress.
Heureusement il y a plein de hooks et de filtres partout.

Répondre

Mister V dit :

9 février 2009 à 14:46

– Juste pour faire de la pub à un projet que j’aime bien et que j’espère voir monter –

Au lieu d’utiliser un WYSIWYG comme TinyMce, pourquoi ne pas se pencher sur les éditeur WYSIWYM, et le seul représentant de l’espèce : WymEditor

Le principe de WymEditor est tout bête, mais très efficace, à la fois pour obtenir du code vraiement propre, mais aussi pour avoir un éditeur d’un nouveau type, clair et efficace à l’utilisation.

Évidemment WymEditor est encore jeune, mais il est très prometteur. A suivre et à promouvoir.

http://www.wymeditor.org/
http://fr.wikipedia.org/wiki/What_you_see_is_what_you_mean

Répondre

Oncle Tom dit :

9 février 2009 à 16:19

J’avais regardé cet éditeur à l’époque mais je n’avais pas l’impression qu’on pouvait surcharger le module d’ajout d’images. Dommage car je me vois mal entrer les URL à la main.

Répondre
- Mister V dit :
  
  18 février 2009 à 15:41
  
  Il est possible dans Wymeditor d’ajouter de nouveaux boutons dans la barre d’outils, et de leur faire faire à peu près ce que l’on veut. Il doit donc, entre autre, être possible de faire un bouton adapté à l’insertion d’image, suivant le CMS utilisé.
  
  Ceci dit, je pense que l’utilisation de cet éditeur est encore un peu expérimentale actuellement, et j’espère que ça va bien évoluer encore parce-qu’il y a clairement des choses améliorables.
  
  Répondre

Michael dit :

7 avril 2009 à 10:41

Bonjour tout le monde,
Je voulais avoir votre aide pour une chose, j’ai vu sur un site que lorsque nous étions membre de ce fameux site, on pouvait directement poster un article sans passer par l’admin.

L’administrateur validait ensuite le message. Connaissez-vous par hasard des plugins pour rendre plus interactif un site avec ses auteurs ?

Je cherche à mettre une console d’écriture d’article directement sur mon site, plus pratique pour les auteurs…

Merci.

Répondre

Victor Teixeira dit :

8 mai 2009 à 0:08

What you need is TDO Mini Forms.

A really good plugin to do exactly what you want.

Répondre

sebastien dit :

24 septembre 2009 à 20:17

Merci pour cet article.
Pour ma part j’ai un message d’erreur :
Warning: call_user_func_array() [function.call-user-func-array]: First argumented is expected to be a valid callback, ‘include_tinymce’ was given in /homez.144/monsite/www/V2/wp-includes/plugin.php on line 339

je suis sur wp2.8.4. Aurais-tu une idée pour m’aider ?

Répondre

Malin94 dit :

30 octobre 2009 à 22:23

Cette lecture me conforte dans mes idées, moi qui pensais être le seul à pester devant mon clavier en regardant le code pas clair du tout de wordpress.