[AUTOMATIQUE] Cet article a plus de 5 ans.
Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.

Si vous souhaitez afficher le WYSIWYG – de l’anglais « What you see is what you get » – natif de WordPress en simplifié en front office, c’est tout à fait faisable grâce aux quelques hooks et fonctions qui vont suivre.

Le WYSIWYG de WordPress est basé sur TinyMCE mais a fait l’objet de quelques surcouches pour mieux l’intégrer à l’interface d’administration de WordPress. Bien évidemment, WordPress utilise des hooks et fonctions pour appeler et permettre d’appeler l’éditeur de texte dans les pages d’édition de posts, d’administration de plugins, de thèmes, etc.

Le WYSIWYG peut être surchargé assez facilement pour y ajouter ou retirer des boutons. Ici nous allons voir comment ajouter une version simplifiée, donc avec seulement les boutons nécessaires.

Voici donc les différentes fonctions que vous devez coller dans le fichier qui contient les fonctions de votre thème :

 

function bweb_comment_editor() {
  global $post;
 
  ob_start();
 
  wp_editor( '', 'comment', array(
    'textarea_rows' => 15,
    'teeny' => true,
    'quicktags' => false,
    'media_buttons' => false
  ) );
 
  $editor = ob_get_contents();
 
  ob_end_clean();
 
  //make sure comment media is attached to parent post
  $editor = str_replace( 'post_id=0', 'post_id='.get_the_ID(), $editor );
 
  return $editor;
}
 
// wp_editor doesn't work when clicking reply. Here is the fix.
function bweb_scripts() {
    wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'bweb_scripts' );

function bweb_comment_reply_link($link) {
    return str_replace( 'onclick=', 'data-onclick=', $link );
}
add_filter( 'comment_reply_link', 'bweb_comment_reply_link' );

function bweb_wp_head() {
	echo "
		<script type='text/javascript'>
		  jQuery(function($){
			$('.comment-reply-link').click(function(e){
			  e.preventDefault();
			  var args = $(this).data('onclick');
			  args = args.replace(/.*\(|\)/gi, '').replace(/\"|\s+/g, '');
			  args = args.split(',');
			  tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'comment');
			  addComment.moveForm.apply( addComment, args );
			  tinymce.EditorManager.execCommand('mceAddEditor', true, 'comment');
			  $('#wp-link .howto, #search-panel').remove();
			});
		  });
		</script>
	";
}
add_filter( 'comment_form_field_comment', 'bweb_comment_editor' );
add_action( 'wp_head', 'bweb_wp_head' );

Source : bechster.com

 

Et pour ma part, j’ajouterais ce petit bout de style pour rendre le tout un peut plus présentable.

#wp-comment-wrap {
	border: 1px solid #ddd;
	margin: 10px 0 15px;
	max-height: 300px;
}
#wp-link-wrap {
	height: 175px !important;
}
#wp-comment-wrap div.mce-statusbar,
#wp-link-wrap #wp-link .howto, 
#wp-link-wrap #search-panel,
#wp-link-wrap .screen-reader-text {
	display:none;
}
#wp-link-wrap #link-selector {
	padding: 0 16px 0;
}

 

Il s’agit d’un « hack » que je ne trouve pas très propre, ni très sécurisé. Mais ça peut être utile dans un cadre restreint (intranet, extranet).

J’ai d’abord essayé d’intégrer le WYSIWYG « light » comme nous venons de le voir, puis j’ai changé de méthode, et comme sur le forum de WordPress.org j’ai préféré n’utiliser que les Quicktags, voici la solution : Utiliser les Quicktags dans vos formulaires de commentaires

 

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Afficher les 11 commentaires

11 commentaires

  1. Bonjour, j’essaie de comprendre le fonctionnement de ce code. D’après ce que j’ai compris il permet d’ajouter l’extension TinyMCE dans une nouvelle page du wordpress ? ou cela n’a rien avoir ? Car c’est ce que je cherche à faire mais je ne trouve pas comment faire ;/

    • Bonjour,
      Cet article est relativement ancien, je pense que la solution donnée n’est plus fonctionnelle.

  2. Bonjour,

    Non le code n’insère pas le bouton justify dans la barre de l’éditeur en commentaires. Tant pis. Je vous remercie pour toute l’aide que vous m’avez apportée.

    Merci encore

    À bientôt,

    Claude

    Cordialement.

  3. Bonjour,

    Je me suis mal exprimé, je cherche en fait à mettre ce bouton uniquement dans la barre de commentaires attaché à la textarea, ainsi que décrit dans ce tutoriel et installé sur mon site.

    Merci d’avance,

    Cordialement,

    Claude

    • Ok, je comprends.
      Pour le coup, je ne sais pas trop, je n’ai jamais eu à faire ceci.
      Je n’ai pas essayé ce bout de code, mais ça devrait fonctionner :

      add_filter( 'mce_buttons', 'bweb_tiny_mce_buttons_justify', 5 );
      function bweb_tiny_mce_buttons_justify( $buttons_array ){
      if ( !is_admin() && !in_array( 'alignjustify', $buttons_array ) && in_array( 'alignright', $buttons_array ) ){
      $key = array_search( 'alignright', $buttons_array );
      $inserted = array( 'alignjustify' );
      array_splice( $buttons_array, $key + 1, 0, $inserted );
      }
      return $buttons_array;
      }

      Si ça ne fonctionne pas, je ne vois pas.

  4. Bonsoir,

    Savez-vous comment ajouter dans la barre de commentaires (tinyMCE) un bouton JUSTIFY ? J’ai longuement chercher sur le web et je n’ai rien trouvé.
    Merci d’avance,

    Cordialement,

    Claude

  5. Bonjour,
    Si tu utilises un thème enfant, tu peux ajouter ton style dans ton fichier style.css, sinon, tu peux le faire via un hook dans functions.php
    Bonne journée.

  6. Bonjour,

    Article très instructif et que j’ai mis en fonction immédiatement. Cela fonctionne parfaitement, excepté que dans mon cas de figure, la zone de texte s’étend sur mon bouton « Laisser un commentaire ».
    Chez moi, en inspectant l’élément, celui fait exactement 741,5 x 330 pixels. Or j’aimerais baisser la hauteur de 330 à 250. Mais hélas, je ne sais quel fichier éditer ou non !
    Pouvez-vous me donner un coup de main,

    Merci d’avnce,

    Claude