Extended custom field: custom button not visible

I have created a custom plugin that shows a custom button in the TinyMce Editor. Work fine with classic wordpress editor but button doesn't appear in acf WYSIWYG editor.

Here's my code:

 add_filter('mce_external_plugins', 'tinyMceCustomShortcodesInit');

 function tinyMceCustomShortcodesInit () {
    $plugins = array('visualblocks');
    $plugins_array = array();

    foreach ($plugins as $plugin ) {
      $plugins_array[ $plugin ] = plugins_url('tinymce/', __FILE__) . $plugin . '/editor_plugin.js';
    }
    return $plugins_array;
 }

 add_action( 'admin_init', 'tinyMceCustomShortcodesButton' );

 function tinyMceCustomShortcodesButton() {
    if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
      add_filter( 'mce_buttons', 'tinyMceCustomShortcodesRegisterButton' );
      add_filter( 'mce_external_plugins', 'tinyMceCustomShortcodesAddButton' );
   }
 }

 function tinyMceCustomShortcodesRegisterButton( $buttons ) {
    array_push( $buttons, "button_eek", "button_green" );
    return $buttons;
 }

 function tinyMceCustomShortcodesAddButton( $plugin_array ) {
    $plugin_array['my_button_script'] = plugins_url( '/mybuttons.js', __FILE__ ) ;
    return $plugin_array;
 }

 foreach ( array('post.php','post-new.php') as $hook ) {
      add_action( "admin_head-$hook", 'tinyMceCustomShortcodesAdminHead' );
 }


function tinyMceCustomShortcodesAdminHead() {
   $plugin_url = plugins_url( '/', __FILE__ );
   ?>
   <!-- TinyMCE Shortcode Plugin -->
  <script type='text/javascript'>
  var my_plugin = {
     'url': '<?php echo $plugin_url; ?>',
  };
  </script>
  <!-- TinyMCE Shortcode Plugin -->
  <?php
}

      

        
        
        
      

    

also i created the following js files: mybuttons.js

 (function() {
 /* Register the buttons */
 tinymce.create('tinymce.plugins.MyButtons', {
      init : function(ed, url) {
           /**
           * Inserts shortcode content
           */
           ed.addButton( 'button_eek', {
                title : 'Insert shortcode',
                image : '../wp-includes/images/smilies/icon_eek.gif',
                onclick : function() {
                     ed.selection.setContent('[myshortcode]');
                }
           });
           /**
           * Adds HTML tag to selected content
           */
           ed.addButton( 'button_green', {
                title : 'Add span',
                image : '../wp-includes/images/smilies/icon_mrgreen.gif',
                cmd: 'button_green_cmd'
           });
           ed.addCommand( 'button_green_cmd', function() {
                var selected_text = ed.selection.getContent();
                var return_text = '';
                return_text = '<h1>' + selected_text + '</h1>';
                ed.execCommand('mceInsertContent', 0, return_text);
           });
      },
      createControl : function(n, cm) {
           return null;
      },
 });
 /* Start the buttons */
 tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons );
 })();

      

        
        
        
      

    

and tinymce / visualblocks / editor_plugin.js which contains the following code:

tinymce.init({
   plugins: "visualblocks"
});

      

        
        
        
      

    

I followed this tutorial: http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_plugins