Create a gist now

Instantly share code, notes, and snippets.

TinyMCE Shortcode Button for WordPress
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 );
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment