i use this custom button for ad's in TinyMCE, i use JavaScript
code to add/develop this one
look into this code:
jQuery(document).ready(function ($) {
tinymce.create('tinymce.plugins.wpse72394_plugin', {
init: function (ed, url) {
// Register command for when button is clicked
ed.addCommand('wpse72394_insert_shortcode', function () {
selected = tinyMCE.activeEditor.selection.getContent();
if (selected) {
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[google-ad]' + selected + '[/google-ad]';
} else {
content = '[google-ad]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton('wpse72394_button', {
title: 'Insert google ad code',
cmd: 'wpse72394_insert_shortcode',
image: url + '/img/mobile_ads-32.png'
});
},
});
// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});
php shortcode register for TinyMCE Editor in function.php
:
function google_ads( $atts, $content = null ) {
ob_start();
.....
return ob_get_clean();
}
add_shortcode( 'google-ad', 'google_ads' );
You must read documentation about customs button add in editor:
https://codex.wordpress.org/TinyMCE_Custom_Buttons
and also read this article:
http://code.tutsplus.com/tutorials/guide-to-creating-your-own-wordpress-editor-buttons--wp-30182