Use custom TinyMCE buttons in ACF WYSIWYG

• kloh

• April 26, 2014 at 12:49 am

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. :-/

• kloh

• April 26, 2014 at 1:04 am

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' ) ) )

• kleio2010

• July 6, 2014 at 1:32 am

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…

• kleio2010

• July 6, 2014 at 1:34 am

so where we can download this useful plugin for acf ?

• Annette Voelckner

• July 29, 2014 at 11:54 pm

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

• kloh

• July 30, 2014 at 1:37 am

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. 😉

• Annette Voelckner

• July 30, 2014 at 3:35 am

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