Skip to content

Instantly share code, notes, and snippets.

@leepettijohn
Created March 30, 2018 12:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leepettijohn/ce04235af987f9977d859a253f073b03 to your computer and use it in GitHub Desktop.
Save leepettijohn/ce04235af987f9977d859a253f073b03 to your computer and use it in GitHub Desktop.
Add button to tinyMCE editor
<?php
/**
* Plugin Name: TinyMCE Custom Link Class
* Plugin URI: http://wpbeginner.com
* Version: 1.0
* Author: WPBeginner
* Author URI: http://www.wpbeginner.com
* Resource: http://www.wpbeginner.com/wp-tutorials/how-to-create-a-wordpress-tinymce-plugin/
* Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
* License: GPL2
*/
class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
//if ( is_admin() ) {
add_action( 'admin_init', 'setup_tinymce_plugin' );
//}
function setup_tinymce_plugin() {
add_filter( 'mce_external_plugins','add_tinymce_plugin' ) ;
add_filter( 'mce_buttons', 'add_tinymce_toolbar_button' );
/* *** Couldn't get it to work without commenting all of this. =P
// Check if the logged in WordPress User can edit Posts or Pages
// If not, don't register our TinyMCE plugin
//if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
// return;
//}
// Check if the logged in WordPress User has the Visual Editor enabled
// If not, don't register our TinyMCE plugin
// if ( get_user_option( 'rich_editing' ) !== 'true' ) {
// return;
// }
}
/**
* Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
*
* @param array $plugin_array Array of registered TinyMCE Plugins
* @return array Modified array of registered TinyMCE Plugins
*/
function add_tinymce_plugin( $plugin_array ) {
$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
return $plugin_array;
}
/**
* Adds a button to the TinyMCE / Visual Editor which the user can click
* to insert a link with a custom CSS class.
*
* @param array $buttons Array of registered TinyMCE Buttons
* @return array Modified array of registered TinyMCE Buttons
*/
function add_tinymce_toolbar_button( $buttons ) {
array_push( $buttons, '|', 'custom_link_class' );
return $buttons;
}
(function() {
tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
// Add Button to Visual Editor Toolbar
editor.addButton('custom_link_class', {
title: 'Insert Button Link',
image: url + '/icon.png',
cmd: 'custom_link_class',
});
// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
// Insert selected text back into editor, wrapping it in an anchor tag
editor.execCommand('mceInsertContent', false, 'inserted content');
});
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment