TinyMCE Shortcode Button for WordPress

shortcode.js

jQuery(document).ready(function($) {

	tinymce.create( 'tinymce.plugins.dbdb_social_button', {

        /**
         *  Initializes the plugin, this will be executed after the plugin has been created.
         *  This call is done before the editor instance has finished its initialization so use the onInit event
         *  of the editor instance to intercept that event.
         *
         *  @param {tinymce.Editor} ed  Editor instance that the plugin is initialized in.
         *  @param {string}         url Absolute URL to where the plugin is located.
         */
		init : function( ed, url ) {
			
			//console.log( ed );

			// Register buttons - trigger above command when clicked
			ed.addButton( 'dbdb_social_button', {
				title : 'Insert social media shortcode',
				cmd : 'insert_shortcode',
				icon: 'twitter',
				}
			);
			
			// Register command for when button is clicked
			ed.addCommand( 'insert_shortcode', function(e) {
				
				console.log( e );

				//selected_text = tinyMCE.activeEditor.selection.getContent();
				var selected_text = ed.selection.getContent(),
					site_name = prompt( "Enter social media site.", 'twitter, facebook, youtube, pinterest' ),
					shortcode,
					return_text;
					
				if ( site_name !== null && '' !== site_name ) {
					site_name = jQuery.trim( site_name );
					if ( '' !== site_name ) {
						return_text = '[social_btn name="' + site_name + '"/]';						
					}
					else {
						return_text =  '';
						alert( "Please enter the name of the social network." );
					}		
				}		

				if( '' !== return_text ){
					//tinymce.execCommand( 'mceInsertContent', false, content );
					ed.execCommand('mceInsertContent', 0, return_text);	
				}				


			});
// example of a dashicons icon labelled button that when pressed results
// in a popup window appearing
ed.addButton( 'dbdbsocial_popup_button', {
	title: 'Example Popup Window Button',
	icon: 'icon dashicons-admin-page',
	cmd : 'insert_social',
	icon: 'twitter',
	//onclick: function() {}
});	
// Register command for when button is clicked
ed.addCommand( 'insert_social', function() {
	ed.windowManager.open({
		title: 'Insert Whatever',
		body: [
		{
			type : 'listbox',
			name : 'site_name',
			label : 'Name',
			values : [
				{ text : 'Facebook',  value : 'facebook' },
				{ text : 'Twitter',   value : 'twitter' },
				{ text : 'YouTube',   value : 'youtube' },
				{ text : 'Pinterest', value : 'pinterest' }
				
			],
		},
		{
			type : 'textbox',
			name : 'site_url',
			label : 'Url',
			placeholder : 'https://twitter.com/remodelDirect'
		}],
		onsubmit: function( e ) {
			ed.execCommand('insert_shortcode', e );
			//ed.insertContent( 'This is your whatever: ' + e.data.site_name + ' ' + e.data.site_url );
		}
	});

});


		},
		





        /**
         *  Creates control instances based in the incoming name. This method is normally not
         *  needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
         *  but you sometimes need to create more complex controls like listboxes, split buttons etc then this
         *  method can be used to create those.
         *
         *  @param {string}                 n  Name of the control to create.
         *  @param {tinymce.ControlManager} cm Control manager to use in order to create new control.
		 *
         *  @return {tinymce.ui.Control} New control instance or null if no control was created.
         */
        createControl : function( n, cm ) {
            return null;
        },

        /**
         *  Returns information about the plugin as a name/value array.
         *  The current keys are longname, author, authorurl, infourl and version.
         *
         *  @return {object} Name/value array containing information about the plugin.
         */
		getInfo : function() {
			return {
				longname : 'DBDB Social Media Shortcode',
				author : 'Darrin Boutote',
				authorurl : 'http://darrinb.com',
				infourl : '',
				version : '1.0.0'
			};
		},
	});


	/**
	 *  Register the TinyMCE plugin
	 *
	 *  @param {string} Button ID.
	 *  @param {object} tinyMCE plugins instance. This must match the first parameter of the tinymce.create() function above.
	 */
	tinymce.PluginManager.add( 'dbdb_social_button', tinymce.plugins.dbdb_social_button );

});