I have created custom plugin that show a custom button in TinyMce Editor. Work fine with classic WordPress editor but button doesn’t appear in acf WYSIWYG editor.
Here 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’ve created 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 that contains this following code:
tinymce.init({
plugins: "visualblocks"
});
I have followed this guideline: http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_plugins