Support

Account

Home Forums Backend Issues (wp-admin) Use custom TinyMCE buttons in ACF WYSIWYG

Solved

Use custom TinyMCE buttons in ACF WYSIWYG

  • Hi,

    I’ve created a light plugin for default TinyMCE editor. Among added functions, there are several custom buttons I add to TinyMCE toolbar.
    I would like to get them on the ACF editor too, but they don’t show up.

    In the meantime, I’ve customed [block_formats] and they are well displayed in the ACF editor, so I don’t understand why my custom buttons don’t.

    I use WP 3.9 / ACF 4.3.7 and here’s my code (I’m sorry for French inside but I think you wouldn’t need it to understand) :

    /* == @section Création d'une extension personnalisée TinyMCE ==================== */
    add_action( 'admin_head', 'continuums_tinymce_buttons' );
    
    function continuums_tinymce_buttons() {
      global $typenow;
      // On vérifie les permissions utilisateurs
      if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
      }
      // On vérifie qu'on est sur un article ou une page
      if( ! in_array( $typenow, array( 'post', 'page' ) ) )
        return;
      // On vérifie que l'éditeur visuel est activé
      if ( get_user_option('rich_editing') == 'true') {
        // Si les 3 conditions précédentes sont remplies, on ajoute les filtres 
        add_filter( "mce_external_plugins", "continuums_add_tinymce_plugin" );
        add_filter( 'mce_buttons', 'continuums_register_tinymce_button' );
      }
    }
    
    /* == @section Ajout des boutons personnalisés ==================== */
    function continuums_add_tinymce_plugin( $plugin_array ) {
      $plugin_array['continuums_tinymce_button'] = plugins_url( '/js/boutons.js', __FILE__ );
      return $plugin_array;
    }
    
    function continuums_register_tinymce_button( $boutons ) {
      array_push( $boutons, "guillemet" );
      array_push( $boutons, "guillemeten" );
      array_push( $boutons, "troispoints" );
      array_push( $boutons, "apostrophe" );
      array_push( $boutons, "agrave" );
      array_push( $boutons, "eaigu" );
      array_push( $boutons, "egrave" );
      array_push( $boutons, "ecirc" );
      array_push( $boutons, "ccedille" );
      array_push( $boutons, "oe" );
      array_push( $boutons, "oemaj" );
      array_push( $boutons, "abbr" );
      return $boutons;
    }
    
    /* == @section Personnalisation de l'éditeur ==================== */
    function continuums_wysiwyg( $editeur ) {
      $editeur['paste_as_text'] = true; // On force le copier/coller en mode texte pour éviter tout import de styles ou balisages indésirables
      $editeur['block_formats'] = 'Paragraphe=p;Titre 2=h2;Titre 3=h3;Titre 4=h4;Pre=pre;Citation longue=blockquote;Citation courte=q';
      $editeur['toolbar1'] = 'undo,redo,formatselect,bold,italic,link,unlink,bullist,numlist,outdent,indent,subscript,superscript,abbr,nonbreaking,charmap,wp_adv,wp_fullscreen';
      $editeur['toolbar2'] = 'agrave,eaigu,egrave,ecirc,ccedille,oe,oemaj,troispoints,apostrophe,guillemet,guillemeten';
      return $editeur;
    }
    add_filter( 'tiny_mce_before_init', 'continuums_wysiwyg');
    
    /* == @section Injection du CSS pour les boutons personnalisés */
    function continuums_tinymce_css() {
      wp_enqueue_style('continuums_tinymce', plugins_url( '/css/boutons.css', __FILE__ ) );
    }
    
    add_action('admin_enqueue_scripts', 'continuums_tinymce_css');

    Then, to apply my custom toolbar to ACF WYSIWYG, I’ve added this code :

    /* == @section Personnalisation de l'éditeur ACF ==================== */
    add_filter( 'acf/fields/wysiwyg/toolbars', 'continuums_wysiwyg_acf' );
    
    function continuums_wysiwyg_acf( $editeur_acf ) {
      $editeur_acf['Full'] = array();
      $editeur_acf['Full'][1] = array('undo','redo','formatselect','bold','italic','link','unlink','bullist','numlist','outdent','indent','subscript','superscript','abbr','nonbreaking','charmap','wp_adv','wp_fullscreen');
      $editeur_acf['Full'][2] = array('agrave','eaigu','egrave','ecirc','ccedille','oe','oemaj','troispoints','apostrophe','guillemet','guillemeten');
      return $editeur_acf;
    }

    The first row is well displayed as there are only TinyMCE buttons. But the second row with my custom buttons is empty (row is displayed but not buttons in it).
    And as I said before, others custom parameters (paste_as_text and block_formats) are well applied.

    I’m pretty noob in developpement so I’m surely missing something, but I don’t find what. :-/

  • I answer to myself. As often, it was a really simple and stupid detail : when I check post_type in the beginning of my code, I haven’t added my custom post type where I display my ACF WYSIWYG.

    My problem is resolved just adding my post type in the following line :

      // On vérifie qu'on est sur un article ou une page
      if( ! in_array( $typenow, array( 'post', 'page', 'custom_poste_type' ) ) )
  • Wow, super, on est meilleur en codage (sauf moi) qu’en football 😉

    Wow, great, we are better (french people) in code (except me) than in football game…

  • so where we can download this useful plugin for acf ?

  • Dear kloh,

    is there any chance we/I might have a look at your plugin? I am trying the same at the moment.

    Best,
    Annette

  • It was for a specific project but I can publish it on github. You just would have to adapt it depending on your needs.
    I let you know when it’s available. 😉

  • Wow, that’s cool, thanks for sharing! 🙂 All the best!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.