Your method is complex… Here is simplest function to add BUTTON in TinyMCE:
(insert this code in funcitons.php):
add_action('admin_init', function() {
if (current_user_can('edit_posts') && get_user_option('rich_editing') == 'true') {
add_filter('mce_buttons_2', 'register_buttonfirst');
add_filter('mce_external_plugins', 'add_pluginfirst');
}
});
function register_buttonfirst($buttons) { array_push($buttons, "|", "shortcode_button1" ); return $buttons;}
function add_pluginfirst($plugin_array) {$plugin_array['MyPuginButtonTag'] = plugin_dir_url( __FILE__ ).'My_js_folder/1_button.php';return $plugin_array;}
add_filter( 'tiny_mce_version', 'my_refresh_mceeee1'); function my_refresh_mceeee1($ver) {$ver += 3;return $ver;}
2) Create 1_button.php in target folder and insert this code (note, change “wp-load” and “ButtonImage.png” urls!!!)
<?php
header("Content-type: application/javascript");
require('../../../../wp-load.php');
?>
(function() {
// START my customs
var abcd =location.host;
tinymce.create('tinymce.plugins.shortcodebuton_plugin2', {
init : function(ed, this_folder_url)
{
// -------------------------
ed.addButton('shortcode_button1', {
title : 'Show Level1 count',
image : this_folder_url + '/ButtonImage.png',
onclick : function() {
var vidId = prompt("YouTube Video", "BLABLABLA");
ed.selection.setContent(vidId );
//ed.execCommand('mceInsertContent', false, 'vidId');
}
});
},
createControl : function(n, cm) { return null; },
});
tinymce.PluginManager.add('MyPuginButtonTag', tinymce.plugins.shortcodebuton_plugin2);
})();
*p.s. before you click a button from editor TOOLBAR, at first, you may need to click cursor inside a post editor, otherwise your button may not work.
(for CUSTOM HTML popup, instead of simple prompt, see this example: http://pastebin.com/raw/0BJZm7cd )