Ajouter un bouton dans l’éditeur WordPress

[/pastacode]

Classe Admin :

[pastacode provider="manual" lang="php"]

 'mcb_category', 'id' => 'mcb_category'));?>





">
 }

/*
* Add buttons to the tiymce bar
*/
function addButtons() {
// Don't bother doing this stuff if the current user lacks permissions
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return false;

if ( get_user_option('rich_editing') == 'true') {
add_filter('mce_external_plugins', array (&$this,'addScriptTinymce' ) );
add_filter('mce_buttons', array (&$this,'registerTheButton' ) );
}
}

/*
* Add buttons to the tiymce bar
*
*/
function registerTheButton($buttons) {
array_push($buttons, "|", "mybutton");
return $buttons;
}

/*
* Load the custom js for the tinymce button
*

*/
function addScriptTinymce($plugin_array) {
$plugin_array['mybutton'] = MTMCE_URL. '/inc/ressources/tinymce.js';
return $plugin_array;
}

}
?>

[/pastacode]

Donc en décrivant ce qu'il se passe, nous avons deux actions :

1. L'ajout du bouton dans l'éditeur
2. L'ajout de l'action ajax ( si vous voulez savoir comment ça marche, vous pouvez vous reporter sur l'article qui explique l'ajax dans WordPress )

Simplement, l'action dans 'admin_init' permet de vérifier si l'utilisateur a les droits suffisants et surtout ajouter deux filtres pour mettre en place le fichier js et aussi ajouter notre bouton à la liste des boutons des tinyMce. Il faut savoir que chaque bouton doit avoir un slug unique! Ici nous utilisons le slug 'mybutton'. Donc notre fichier javascript qui gère le comportement du bouton est inclus seulement si le bouton apparaît dans la liste des boutons.

La méthode wp_ajax_fct permet juste d'afficher notre formulaire pour choisir la catégorie que l'on veut utiliser pour afficher nos articles mais aussi le nombre d'articles à afficher.

Javascript

Pour le javascript, il suffit d'avoir un seul fichier pour que ça marche :

[pastacode provider="manual" lang="javascript"]

(function() {
var called = false;
tinymce.create('tinymce.plugins.mybutton', {
init : function(ed, url) {
ed.addButton('mybutton', {
title : 'My button',
image : url + '//d3npp2g4rgtsd5.cloudfront.net/images/mybutton.png',
cmd : 'mceMyButtonInsert',
});

ed.addCommand('mceMyButtonInsert', function(ui, v) {
tb_show('', ajaxurl + '?action=mybutton_shortcodePrinter');
if(called == false) {
called = true;
jQuery('#mcb_button').live("click", function(e) {
e.preventDefault();

tinyMCE.activeEditor.execCommand('mceInsertContent', 0, mybutton_create_shortcode());

tb_remove();
});
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('mybutton', tinymce.plugins.mybutton);
})();

function mybutton_create_shortcode() {
return '[my-listing category="' + jQuery('#mcb_category').val() + '" posts_per_page="' + jQuery('#mcb_number').val() + '"]';
}

[/pastacode]

Rapide tour de  ce qu'il se passe, on ajoute donc une action spéciale sur notre bouton avec le tinymce.PluginManager.add('mybutton', tinymce.plugins.mybutton); et nous déclarons la fonction associée avec tinymce.create('tinymce.plugins.mybutton', ,il ajoute aussi le bouton dans la barre. Comme vous pouvez le voir, on peut mettre une image ( très recommandé ) à notre bouton pour qu'il soit facilement repérable dans l'éditeur. Nous ajoutons aussi l'effet que le click au bouton va déclencher avec cmd : 'mceMyButtonInsert', et avec ed.addCommand('mceMyButtonInsert', nous attrapons l'appel pour pouvoir déclencher la fonction qui nous intéresse à ce moment là.

Dans notre cas nous appelons thickbox avec notre action ajax et après nous ajoutons l'action live sur le bouton de validation de notre petit formulaire dans la thickbox. Au click on lance tout simplement une insertion de contenu en appelant notre fonction mybutton_create_shortcode qui va retourner à tinyMce la chaîne à insérer.

Dans notre cas on insère le shortcode avec les arguments sélectionnés.

 La partie client

Pour la partie client, on va juste ajouter le shortcode et l'interpréter :

[pastacode provider="manual" lang="php"]

 



$q_posts->the_post();



?>



}
?>