J’ai cherché comment ajouter simplement un bouton, pour un shortcode que j’avais créé, dans l’éditeur visuel de WordPress (TinyMCE). Ce sujet fait l’objet de plusieurs tutoriels très bien rédigés que j’ai mis en lien à la fin de l’article.
J’ai suivi les tutoriels mais je souhaite ajouter deux petites choses pour ajouter un bouton pour son shortcode pile comme l’on souhaite.
Placer son bouton où l’on souhaite dans l’éditeur de WordPress
Par défaut les différents exemples que j’ai trouvé placent le bouton tout à droite de la première rangée de bouton. Moi je souhaite le placer avant le bouton qui fait apparaitre la deuxième rangée de boutons. Sinon on a l’impression que notre bouton ne fait pas vraiment partie de la première rangée.
Dans la fonction register_button voici comment placer où l’on souhaite son bouton.
Notez aussi l’utilisation du séparateur « | » qui laisse de l’espace en les boutons.
function register_button($buttons) {
$pos = array_search( 'wp_adv', $buttons, true );
if ( $pos !== false ) {
$tmp_buttons = array_slice( $buttons, 0, $pos );
array_push($tmp_buttons,'|', "slider", '|');
$buttons = array_merge( $tmp_buttons, array_slice( $buttons, $pos ) );
}
return $buttons;
}Pour le placer avant un autre bouton il suffit de chercher un autre bouton à la première ligne de la fonction dans array_search().
Pour connaitre le nom des boutons présents faîtes un var_dump($buttons); die;. Apparaitra alors le tableau de bouton avec le nom de tous les boutons présents.
Enfin si vous voulez faire apparaitre votre bouton sur la deuxième rangée plutôt que sur la première. Utilisez le filtre:
add_filter('mce_buttons_2', 'cnsx_register_button');Et le pomme Z
Très simple il suffit d’ajouter ed.undoManager.add(); à notre plugin tinyMCE sur l’événement onclick. Comme suit :
onclick : function() {
ed.selection.setContent('[mylink]' + ed.selection.getContent() + '[/mylink]');
ed.undoManager.add();
...
}Merci à @Peter_Ajtai pour celle la.
Références :