Utiliser l’éditeur de texte (WYSIWYG) de Wordpress dans vos plugins !

J’en avais besoin pour mon plugin « Comments Winners » (qui devrait bientôt faire son apparition sur vos écrans).

J’ai donc farfouillé dans le code Wordpress pour voir comment ils le faisaient pour la gestion des articles et, au final, c’est plutôt simple !

Commencez par ajoutez au début de votre plugin une « action » qui va exécuter le code d’une fonction à l’initialisation de l’administration :

add_action('admin_init', 'init_wysiwyg');

Ajoutez ensuite la fonction en question qui va se charger de définir quelques scripts à charger pour que l’éditeur fonctionne correctement :

function init_wysiwyg()
{
	wp_enqueue_script('editor');
	add_thickbox();
	wp_enqueue_script('media-upload');
	add_action('admin_print_footer_scripts', 'wp_tiny_mce', 25);
	wp_enqueue_script('quicktags');
}

Il ne vous reste plus qu’à insérer votre éditeur WYSIWYG où bon vous semble dans votre plugin comme ceci :

<div id="poststuff"><?php the_editor(); ?></div>

Le DIV poststuff est important pour éviter les bugs de style sur l’éditeur WYSIWYG.

La fonction the_editor de Wordpress possède plusieurs paramètres :

the_editor($content, $id = 'content', $prev_id = 'title', $media_buttons = true, $tab_index = 2)

• $content : Le contenu de l’éditeur de texte.
• $id : Le nom (et ID) du champ de l’éditeur de texte.
• $prev_id : L’ID du champ précédent pour pouvoir switcher entre les différents champs du formulaire.
• $media_buttons : Booléen (true ou false) qui défini si il faut afficher les boutons pour insérer des fichiers (images, sons, vidéos, etc).
• $tab_index : L’index de tabulation du champ de formulaire.

Donc vous pouvez même définir un contenu de base et un nom de champ à votre éditeur :

<div id="poststuff"><?php the_editor(get_option('my_plugin_option'), 'my_plugin_option'); ?></div>

Et pour que la ressemblance soit parfaite, vous pouvez définir le style du textarea (qui est affiché lorsque vous êtres en mode HTML) dans votre CSS :

#poststuff textarea
{
	-moz-box-sizing:border-box;
	border:0 none;
	line-height:150%;
	outline-color:-moz-use-text-color;
	outline-style:none;
	outline-width:medium;
	padding:6px;
	margin:0;
	width:100%;
}

Ensuite, du côté de la réception du formulaire, un petit coup de nl2br() sera nécessaire pour garder les retours à la ligne :

echo nl2br($_POST['my_wysiwyg']);

Elle est pas belle la vie ?

Je me demande bien pourquoi ils n’en parlent même pas dans la doc Wordpress. Ça peut quand même être bien pratique et ça permet de garder une cohérence dans toute l’administration plutôt que d’utiliser un autre éditeur (ou pas d’éditeur du tout)…

Enjoy ! ;-)