[WordPress] Adding a custom button to the TinyMCE editor

00-tinymce-button.js

(function() {
	'use strict';

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

		init: function( ed, url ) {

			ed.addButton( 'acmeoption', {
				title: 'Acme Option',
				cmd:   'acmeoption',
				image: url + '/button.png'
			});

		},

		createControl: function( n, cm ) {
			return null;
		},

		getInfo: function() {

			return {

				longname:  'Acme TinyMCE Button',
				author:    'Tom McFarlin',
				authorurl: 'https://tommcfarlin.com',
				version:   '0.0.1'

			};

		}

	});

	tinymce.PluginManager.add( 'acme', tinymce.plugins.acme );

})();

01-mce-external-plugins.php

<?php

public function mce_button() {

	add_filter(
		'mce_external_plugins',
		array( $this, 'add_button' )
	);

}

public function add_button( $plugin_array ) {

	$plugin_array['yhd'] = plugin_dir_url( dirname( __FILE__ ) ) . 'admin/assets/js/tinymce-button.min.js';

	return $plugin_array;

}

02-mce-buttons.php

<?php

public function mce_button() {

	add_filter(
		'mce_external_plugins',
		array( $this, 'add_button' )
	);

	add_filter(
		'mce_buttons',
		array( $this, 'register_button' )
	);

}

public function register_button( $buttons ) {

	array_push(
		$buttons,
		'acmeoption'
	);

	return $buttons;

}

03-acme-button.php

<?php

/**
 * The plugin bootstrap file
 *
 * This file is read by WordPress to generate the plugin information in the plugin
 * admin area. This file also includes all of the dependencies used by the plugin,
 * registers the activation and deactivation functions, and defines a function
 * that starts the plugin.
 *
 * @link              https://tommcfarlin.com
 * @since             1.0.0
 * @package           Acme_Button
 *
 * @wordpress-plugin
 * Plugin Name:       TinyMCE Button Example
 * Description:       An example of how to register a custom button with the TinyMCE editor in WordPress.
 * Version:           1.0.0
 * Author:            Tom McFarlin
 * Author URI:        https://tommcfarlin.com
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 */

// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
	die;
}

/**
 * The class responsible for registering the hooks with WordPress.
 */
require plugin_dir_path( __FILE__ ) . 'includes/class-acme-button-loader.php';

/**
 * Begins execution of the plugin.
 *
 * Since everything within the plugin is registered via hooks,
 * then kicking off the plugin from this point in the file does
 * not affect the page life cycle.
 *
 * @since    1.0.0
 */
function run_acme_button() {

	$plugin = new Acme_Button();
	$plugin->initialize();

}
run_acme_button();

04-class-acme-button.php

<?php

class Acme_Button {

	private $version;

	public function __construct() {
		$this->version = '1.0.0';
	}

	public function initialize() {
	}

	public function get_version() {
		return $this->version;
	}

}

05-class-acme-button-loader.php

<?php

class Acme_Button_Loader {

	private $plugin;

	public function __construct( $plugin ) {
		$this->plugin = $plugin;
	}

	public function add_button( $plugin_array ) {

		$plugin_array['yhd'] = plugin_dir_url( dirname( __FILE__ ) ) . 'admin/assets/js/tinymce-button.min.js';

		return $plugin_array;

	}

	public function register_button( $buttons ) {

		array_push(
			$buttons,
			'selectcolor'
		);

		return $buttons;

	}

}

06-initialize-method.php

<?php

public function initialize() {
		
	add_filter(
		'mce_external_plugins',
		array( $this->loader, 'add_button' )
	);

	add_filter(
		'mce_buttons',
		array( $this->loader, 'register_button' )
	);
	
}

07-mce-definitions.php

<?php

class Acme_Button_Loader {	

	// Code removed for brevity's sake

	public function add_button( $plugin_array ) {

		$plugin_array['yhd'] = plugin_dir_url( dirname( __FILE__ ) ) . 'admin/assets/js/tinymce-button.min.js';

		return $plugin_array;

	}

	public function register_button( $buttons ) {

		array_push(
			$buttons,
			'selectcolor'
		);

		return $buttons;

	}
	
}

08-acme-button.php

<?php

class Acme_Button {

	private $version;

	private $loader;

	public function __construct() {

		$this->version = '1.0.0';
		$this->loader  = new Acme_Button_Loader( $this );

	}
	
	// Code removed for brevity's sake
	
}

09-tinymce-dependencies.js

(function() {
	'use strict';

	tinymce.create( 'tinymce.plugins.acme', {
		
	init: function( ed, url ) {

		// Code removed for brevity's sake
		
		// Assume this file is the path to your dependency
		var sJavaScriptUrl = 'dependency.js';
		
		ed.addCommand( 'acmebutton', function() {

			jQuery.getScript( sJavaScriptUrl, function() {
				acme_init_selector( jQuery );
			});

		});

	},

	// Code removed for brevity's sake

})( jQuery );

10-assets-url.js

/**
 * Retrieves the URL of the assets to be used for the button in
 * the editor.
 *
 * @access   private
 * @since    1.0.0
 *
 * @param    string    url    The URL of where this JavaScript file is located
 * @return   string    sUrl   The path to the assets directory
 */
_assetsUrl: function( url ) {

	var aUrl, i, l, sUrl = '';

	aUrl = url.split( '/' );

	for ( i = 0, l = aUrl.length - 1; i < l; i++ ) {
		sUrl += aUrl[ i ] + '/';
	}

	return sUrl;

},

11-images-url.js

/**
 * Retrieves the URL of the image to be used for the button in
 * the editor. This function assumes the image is located a directory above
 * where this script is located and in the `img` directory.
 *
 * @access   private
 * @since    1.0.0
 *
 * @param    string    url    The URL of where this JavaScript file is located
 * @return   string           The path to the image used for the button
 */
_imgUrl: function( url ) {
	return this._assetsUrl( url ) + 'img/temp.png';
},

12-adding-a-button.js

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

	ed.addButton( 'acmeoption', {

		title: 'Acme Option',
		cmd:   'acmeoption',
		image: this._imgUrl( url )

	});

},

13-full-tinymce-button.js

(function() {
	'use strict';

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

		/**
	     	 * Retrieves the URL of the assets to be used for the button in
	     	 * the editor.
	     	 *
	     	 * @access   private
	     	 * @since    1.0.0
	     	 *
	     	 * @param    string    url    The URL of where this JavaScript file is located
	     	 * @return   string    sUrl   The path to the assets directory
	         */
		_assetsUrl: function( url ) {
	
			var aUrl, i, l, sUrl = '';
	
			aUrl = url.split( '/' );
	
			for ( i = 0, l = aUrl.length - 1; i < l; i++ ) {
				sUrl += aUrl[ i ] + '/';
			}
	
			return sUrl;
	
		},
	
		/**
	     	 * Retrieves the URL of the image to be used for the button in
	     	 * the editor. This function assumes the image is located a directory above
	     	 * where this script is located and in the `img` directory.
	     	 *
	     	 * @access   private
	     	 * @since    1.0.0
	     	 *
	     	 * @param    string    url    The URL of where this JavaScript file is located
	     	 * @return   string           The path to the image used for the button
	     	 */
		_imgUrl: function( url ) {
			return this._assetsUrl( url ) + 'img/temp.png';
		},
	
		/**
	     	 * Initializes the plugin, this will be executed after the plugin has been created.
	     	 * This call is done before the editor instance has finished it's initialization
	     	 * so use the onInit event
	     	 * of the editor instance to intercept that event.
	     	 *
	     	 * @since    1.0.0
	     	 *
	     	 * @param    tinymce.Editor    ed     Editor instance that the plugin is initialized in.
	     	 * @param    string            url    Absolute URL to where this plugin is located.
	     	 */
		init: function( ed, url ) {
	
			ed.addButton( 'acmeoption', {
	
				title: 'Acme Option',
				cmd:   'acmeoption',
				image: this._imgUrl( url )
	
			});
				
		},
	
		/**
	     	 * @access   private
	     	 * @since    1.0.0
	     	 *
	     	 * @param    string    url    The URL of where this JavaScript file is located
	     	 */
		getInfo: function() {
	
			return {
	
				longname:  'Acme Editor Button',
				author:    'Tom McFarlin',
				authorurl: 'https://tommcfarlin.com',
				version:   '1.0.0.'
	
			};
	
		}
	
	});
	
	tinymce.PluginManager.add( 'acme', tinymce.plugins.acme );

})( jQuery );

14-handling-multiple-instances.js

(function( $ ) {
	'use strict';

	// Used to track the number of times this plugin has been invoked
	var iInvoked = 0;

	tinymce.create( 'tinymce.plugins.acme', {
	  
		/**
        	 * Initializes the plugin, this will be executed after the plugin has been created.
        	 * This call is done before the editor instance has finished it's initialization
        	 * so use the onInit event
        	 * of the editor instance to intercept that event.
        	 *
        	 * @since    1.0.0
        	 *
        	 * @param    tinymce.Editor    ed     Editor instance that the plugin is initialized in.
        	 * @param    string            url    Absolute URL to where this plugin is located.
        	 */
		init: function( ed, url ) {

			/**
		 	 * This code is used because other plugins may be calling `media_buttons`
		 	 * which will trigger this plugin to run. In order to make sure the plugin
		 	 * is running as many times as it should and no more, we have to place this
		 	 * check here in order to make sure it works.
		 	 */
			iInvoked++;
			if ( 1 < iInvoked ) {
				return;
			}

			// The rest of the code that should fire appears here.

		}

	});

	tinymce.PluginManager.add( 'acme', tinymce.plugins.acme );

})( jQuery );

15-tinymce-skeleton-for-content.js

/**
 * Retrieves the URL of the assets to be used for the button in
 * the editor.
 *
 * @access   private
 * @since    1.0.0
 *
 * @param    string    url    The URL of where this JavaScript file is located
 * @return   string    sUrl   The path to the assets directory
*/
_assetsUrl: function( url ) {

	var aUrl, i, l, sUrl = '';
	
	aUrl = url.split( '/' );
	
	for ( i = 0, l = aUrl.length - 1; i < l; i++ ) {
		sUrl += aUrl[ i ] + '/';
	}
	
	return sUrl;

},

/**
 * Retrieves the URL of the image to be used for the button in
 * the editor. This function assumes the image is located a directory above
 * where this script is located and in the `img` directory.
 *
 * @access   private
 * @since    1.0.0
 *
 * @param    string    url    The URL of where this JavaScript file is located
 * @return   string           The path to the image used for the button
 */
_imgUrl: function( url ) {
	return this._assetsUrl( url ) + 'img/temp.png';
},
		
init: function( ed, url ) {
	
	ed.addButton( 'acmeoption', {

		title: 'Acme Option',
		cmd:   'acmeoption',
		image: this._imgUrl( url )

	});
		
}

16-tinymce-adding-content.js

ed.execCommand(
	'mceInsertContent',
	false,
	'This is the content that we want to insert into the editor.'		
);

17-tinymce-add-content.js

/**
 * Retrieves the URL of the assets to be used for the button in
 * the editor.
 *
 * @access   private
 * @since    1.0.0
 *
 * @param    string    url    The URL of where this JavaScript file is located
 * @return   string    sUrl   The path to the assets directory
*/
_assetsUrl: function( url ) {

	var aUrl, i, l, sUrl = '';
	
	aUrl = url.split( '/' );
	
	for ( i = 0, l = aUrl.length - 1; i < l; i++ ) {
		sUrl += aUrl[ i ] + '/';
	}
	
	return sUrl;

},

/**
 * Retrieves the URL of the image to be used for the button in
 * the editor. This function assumes the image is located a directory above
 * where this script is located and in the `img` directory.
 *
 * @access   private
 * @since    1.0.0
 *
 * @param    string    url    The URL of where this JavaScript file is located
 * @return   string           The path to the image used for the button
 */
_imgUrl: function( url ) {
	return this._assetsUrl( url ) + 'img/temp.png';
},
		
init: function( ed, url ) {
	
	ed.addButton( 'acmeoption', {

		title: 'Acme Option',
		cmd:   'acmeoption',
		image: this._imgUrl( url )

	});
	
	ed.execCommand(
		'mceInsertContent',
		false,
		'This is the content that we want to insert into the editor.'		
	);
		
}

18-javascript-prompt.js

prompt( "What is your first name?" );

19-prompt-user-function.js

/**
 * Prompts the user for the first name and returns the value to the caller.
 *
 * @since    1.0.0
 *
 * @return   string    The first name of the user. If not speciied, then a default string.
 */
function get_user_name() {
	return prompt( "What is your first name?" );
}

20-get-user-name-prompt.js

/**
 * Prompts the user for the first name and returns the value to the caller.
 *
 * @since    1.0.0
 * @param    object    $        A reference to the jQuery object
 * @return   string    name     The first name of the user. If not speciied, then a default string.
 */
function get_user_name( $ ) {
	
	var name;
	
	// Grab the input from the user
	name = prompt( "What is your first name?" );
	
	// If the user didn't enter any information, then provide a default value
	if ( null === $.trim( name ) || 0 === name.length ) {
    		name = '[User provided no input.]';
	}
	
	return name;
	
}

21-user-input-into-post-editor.js

var name = get_user_name( $ );

ed.execCommand(
	'mceInsertContent',
	false,
	name
);