Ajouter des boutons dans l’éditeur visuel de WordPress (TinyMCE)
Voici une astuce pour ajouter des boutons supplémentaires dans votre éditeur.
Attention, ce tutoriel n’a pas pour objectif de créer un bouton personnalisé mais bien d’ajouter des icônes supplémentaires disponibles avec TinyMCE en natif.
N.B : la plupart n’ont pas besoin d’être rajouté car les styles (couleur, police, etc.) doivent être gérés via la feuille de styles CSS de votre thème.
Sous Apparence puis Éditeur, rajoutez ces lignes dans le fichier functions.php :
Pour en ajouter d’autres, consultez la liste complète des boutons pris en charge dans TinyMCE.
Rajoutez ensuite une ligne du type :
Personnellement, j’ai rajouté les icônes : exposant et indice.
Vous pouvez aussi choisir la ligne sur laquelle s’afficheront ces boutons supplémentaires. Dans l’exemple, il s’ajouteront sur la seconde ligne comme le détermine le mce_buttons_2. Changez le numéro par 1,2 ou 3 pour modifier l’emplacement.
Par défaut, WordPress n’affiche qu’une seule ligne d’icônes : cliquez sur le dernier bouton pour montrer la seconde.
Cette astuce vous permettra de vous passer de plugin comme TinyMCE Advanced en paramétrant finement votre back office WordPress.
Bonjour
Avec WP 4.3.1 est ce normal que cela ne fonctionne plus comme technique ?
J’ai ajouté le code dans function.php et ma toolbar TinyMCE ne change pas
Il s’agit en fait de “ajouter un bouton” et celui-ci est marqué d’un go sous le format Back Office
Merci pour cet article ! mais je n’arrive pas à enlever un bouton “go” qui reste implanter en plein milieu de mon texte. Impossible de le saisir et de le retirer… j’ai voulu le déplacer et cela m’a fait un grand encadré gris et hop bloqué ! avez-vous une solution peut-être ?
Merci à vous Camille
Je n’ai pas connaissance d’un bouton GO dans l’éditeur par défaut de WordPress…
a chaque fois que je cherche un tuto wordpress je tombe sur ton site XD . En tout cas vraiment bravo , tes tuto m’aide beaucoup dans le développement de mon site
😎
Salut,
Super technique, bien utile pour avoir un éditeur perso pour le client final. Ca parait simple, et pourtant je galère (comme souvent). Je me permets de vous exposer le souci :
– Je veux donner la possibilité d’accéder a des styles de mon thème au rédacteur (classe machin, titres specifiques, blocs ecadrés, ….) : je créée un fichier ‘styles-editeur.css’, je les charge avec ce code (dans functions.php) :
————————————————————–
function my_theme_add_editor_styles() {
add_editor_style( ‘style-editeur.css’ );
}
add_action( ‘init’, ‘my_theme_add_editor_styles’ );
————————————————————–
– Pour afficher la selection de style, j’ajoute à functions.php:
———————————————————————–
function wpc_boutons_tinymce($buttons) {
$buttons[] = ‘styleselect’;
return $buttons;
}
add_filter(“mce_buttons_3”, “wpc_boutons_tinymce”);
————————————————————————–
Le bouton de selection de style apparait bien, mais je ne voius aucune des classes qui sont dans le fichier css.
Quelqu’un aurait-il une diée?
Merci d’avance.
Bonjour,
Si ça peut intéresser quelqu’un voici une autre façon d’ajouter mais aussi d’enlever des boutons à l’éditeur TinyMCE avec la nouvelle version de WordPress (3.9) :
Copier/coller le code ci-dessous dans le fichier functions.php de votre thème, et ajouter/enlever le nom des boutons que vous souhaitez :
function make_mce_awesome($in) {
$in[‘toolbar1′]=’bold,italic,underline, forecolor, alignleft, aligncenter, alignright, alignjustify, bullist,numlist,blockquote,|,link,unlink,|,pastetext, pasteword, removeformat, undo, redo, charmap, superscript, subscript’;
$in[‘toolbar2′]=’formatselect’;
$in[‘toolbar3’]=”;
$in[‘toolbar4’]=”;
return $in;
}
add_filter(‘tiny_mce_before_init’, ‘make_mce_awesome’);
La ligne [‘toolbar1’] correspond à la 1ère ligne de l’éditeur
La ligne [‘toolbar2’] correspond à la 2ème ligne de l’éditeur
…
Liste des boutons sur le site suivant: http://www.tinymce.com/wiki.php/Controls
Si vous souhaitez modifier les formats du bouton “formatselect” (paragraphe, titre1…), vous devez rajouter la ligne $in[‘block_formats’] = ‘Paragraph=p;Heading 3=h3;Heading 2=h2;Heading 3=h3’; au script
exemple :
function make_mce_awesome($in) {
$in[‘block_formats’] = ‘Paragraph=p;Heading 2=h2;Heading 3=h3’;
$in[‘toolbar1′]=’bold,italic,underline, forecolor, alignleft, aligncenter, alignright, alignjustify, bullist,numlist,blockquote,|,link,unlink,|,pastetext, pasteword, removeformat, undo, redo, charmap, superscript, subscript’;
$in[‘toolbar2′]=’formatselect’;
$in[‘toolbar3’]=”;
$in[‘toolbar4’]=”;
return $in;
}
add_filter(‘tiny_mce_before_init’, ‘make_mce_awesome’);
Super contribution ! 🙂
Bonjour à tous,
voici une liste que j’ai récupéré tout ne fonctionne pas mais ça peut aider (WP 391)
bold
italic
underline
strikethrough
justifyleft
justifycenter
justifyright
justifyfull
bullist
numlist
outdent
indent
cut
copy
paste
undo
redo
link
unlink
image
cleanup
help
code
hr
removeformat
formatselect
fontselect
fontsizeselect
styleselect
sub
sup
forecolor
backcolor
forecolorpicker
backcolorpicker
charmap
visualaid
anchor
newdocument
blockquote
separator ( | is possible as separator, too)
Par contre Aurélien, ton lien chez Tiiny ne fonctionne pas.
ADIO
Super merci j’ai corrigé le lien !
Bonjour,
Est-il possible d’ajouter des boutons pour le formulaire de commentaires, sans utiliser de plugin (Comment Form Quicktags par exemple) ?
Merci 🙂
Je pense avoir lu ça quelque part mais je ne peut m’en souvenir…
Bonjour
Merci pour l’astuce ! Cà fait un plugin de moins !
De mon coté, je me sert de temps en temps de l’exposant mais, le bouton de s’affiche pas.
Je suis sous WP 3.9.1.
Quelqu’un a une idée ?
Par avance merci
Alain
Bonjour,
J’ai eu le même soucis que toi. Depuis la nouvelle version, il y a pas mal de boutons qui ont changé de nom. Pour l’exposant il s’agit de “superscript” (anciennement sup).
Pour info :
sub devient subscript
justifyleft devient alignleft
justifycenter devient aligncenter
justifyright devient alignright
justifyfull devient alignjustify
Intéressant !! Merci.
Et pour retirer des boutons comment faire ?
C’est intéressant pour livrer un site à des néophytes qui sont perdus plus il y a de boutons dont ils ne se servent pas 😉
Tu as lu le commentaire du dessus ?
J’ai trouvé comment enlever des boutons suivant l’utilisateur.
Ci-dessous le code si ça peut intéresser quelqu’un :
function custom_disable_mce_buttons( $opt ) {
global $current_user;
get_currentuserinfo();
if ( current_user_can(‘editor’) )
$opt[‘theme_advanced_disable’] = ‘numlist, justifyfull, strikethrough, wp_more, wp_fullscreen, wp_adv, styleselect, charmap, wp_help, outdent, indent, pasteword, pastetext’;
return $opt;
}
add_filter(‘tiny_mce_before_init’, ‘custom_disable_mce_buttons’);
Le code est à insérer dans le fichier functions.php de votre thème.
Sur la 4ème ligne vous pouvez changer l’utilisateur (administrator, editor, author…)
C’est sur la 5ème ligne que vous pouvez mettre le nom des boutons à enlever (dans mon exemple le 1er bouton est numlist).
Pour connaître le nom du bouton, identifier l’id du bouton à l’aide de Firebug.et prendre seulement le mot après le content_
Exemple pour le bouton gras : id=”content_bold”
vous devez insérer bold dans le code
liste des boutons :
http://www.tinymce.com/wiki.php/TinyMCE3x:Buttons/controls
Merci du partage !
Merci pour ce super tuto.
Je souhaiterais aller un peu plus loin et enlever certains boutons pour le profil “editeur” par exemple. J’ai essayé mais j’avoue que je galère un peu.
Est ce que quelqu’un à une solution ?
je veux ajout les options indice exposant au titre d’un article dans la partie admin
svp aide moi
Il faut ajouter les balises HTML dans le titre même si je le déconseille. La balise
supousuben oubliant de la fermer.Bonjour
Est-il possible de supprimer l’éditeur TinyMCE de la page d’admin ?
Je n’arrive pas à trouver quelque chose à ce sujet…
Aucun intérêt à faire cela…
vous voulez le supprimer pour le remplacer par un autre?
l’éditeur par défaut dans WordPress est WYSIWYG
http://www.geekpress.fr/wordpress/astuce/desactiver-editeur-visuel-wordpress-660/
Bonjour
Je suis passé par le plugin Advanced Custom Fields, qui me permet de faire un admin 100% customisé et même de désactiver le champ TinyMCE correspondant à the_content() : comme ça mon code ne repose plus que sur ACF et est plus homogène.
Merci de m’avoir répondu.
ACF très bonne idée !
bonsoir,
où trouver les fichiers de traductions pour avoir le plugin en français?
sur readme.txt, il donne cet url http://tinymce.moxiecode.com/download_i18n.php mais rien, merci
Merci, c’est toujours bon à connaitre ces inclusions en natif. Cependant je souhaiterai savoir si j’ai bien fait la chose : J’ai collé le code en bas du fichier (functions.php), mais ce fichier est lié au thème… est-ce que ce code est à replacer en cas de mise à jour du thème, ou à chaque changement de thème ? Merci
Pour ne pas dépendre du thème, il faut créer un fichier de fonctions globales. C’est pas très compliqué.
Merci beaucoup!
Intéressant, mais j’ai quand même une question un peu plus personnelle 🙂
Admettons que je développe un plugin (privé) qui pourrait avoir des connections avec l’édition d’un post, y’a-t-il un site où l’on peut trouver des icônes libres de droit à utiliser (et compatibles) ?
Merci !
Aucune idée ! 🙁
Benzaky, le spammeur des blogs WordPress Francophone =D
Ben de toute façon lien bloqué… 🙂
Article plein d’informations comme d’habitude