Skip to content

Instantly share code, notes, and snippets.

@tommcfarlin

tommcfarlin/00-tinymce-button.js Secret

Last active May 12, 2017
Embed
What would you like to do?
[WordPress] Adding a custom button to the TinyMCE editor
(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 );
})();
<?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;
}
<?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;
}
<?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();
<?php
class Acme_Button {
private $version;
public function __construct() {
$this->version = '1.0.0';
}
public function initialize() {
}
public function get_version() {
return $this->version;
}
}
<?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;
}
}
<?php
public function initialize() {
add_filter(
'mce_external_plugins',
array( $this->loader, 'add_button' )
);
add_filter(
'mce_buttons',
array( $this->loader, 'register_button' )
);
}
<?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;
}
}
<?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
}
(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 );
/**
* 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 )
});
},
(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 );
(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 );
/**
* 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.'
);
/**
* 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.'
);
}
prompt( "What is your first name?" );
/**
* 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?" );
}
/**
* 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;
}
var name = get_user_name( $ );
ed.execCommand(
'mceInsertContent',
false,
name
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.