Below I’ll give you some examples on how you can extend the functionality of the TinyMCE.
Adding Font Size & Font Family Selects
By default the Custom Fonts and font sizes are not added into the TinyMCE editor. The function below will add both of these dropdowns to the far left of the editor in the second row. Simply change where it says ‘mce_buttons_2′ if you want it in a different row (ex: use ‘mce_buttons_3′ for the 3rd row).
if ( ! function_exists( 'wp_mce_buttons' ) ) {
function wp_mce_buttons( $buttons ) {
array_unshift( $buttons, 'fontselect' ); // Add Font Select
array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
return $buttons;
}
}
add_filter( 'mce_buttons_2', 'wp_mce_buttons' );
Adding Custom Font Sizes
By default the font sizes are set to pt values which isn’t always ideal. I prefer to use pixel values (12px, 13px, 14px, 16px..etc) and to provide more options for grater flexibility. The function below will alter the default font size options in the dropdown selector.
// Customize mce editor font sizes
if ( ! function_exists( 'wp_mce_text_sizes' ) ) {
function wp_mce_text_sizes( $initArray ){
$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
return $initArray;
}
}
add_filter( 'tiny_mce_before_init', 'wp_mce_text_sizes' );
Adding Custom Fonts
The default font options in the font family selector are all “web-safe” fonts by default, but what if you wanted to add more fonts to the selector? Maybe some Google Fonts? We’ll it’s really easy have a look at the example below.
if ( ! function_exists( 'wp_mce_google_fonts_array' ) ) {
function wp_mce_google_fonts_array( $initArray ) {
$initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
return $initArray;
}
}
add_filter( 'tiny_mce_before_init', 'wp_mce_google_fonts_array' );
Notice how I added “Lato” to the list in the code above? It’s that simple! In my Total WordPress theme I actually loop through any custom font’s used on the site as defined in the theme panel and add them to the select box so they are also available while editing your posts/pages (sweet). But the code ONLY ads the font-family to the drop-down it won’t magically load the script so that when you change your text in the editor you can actually see that custom font applied to it…That’s what the code below does!
// Add Google Scripts for use with the editor
if ( ! function_exists( 'wp_mce_google_fonts_styles' ) ) {
function wp_mce_google_fonts_styles() {
$font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style( str_replace( ',', '%2C', $font_url ) );
}
}
add_action( 'init', 'wp_mce_google_fonts_styles' );
Adding A Simple MCE Button
Adding a new button to the TinyMCE editor is especially useful for shortcodes, because as a user you don’t have to remember any shortcodes you can simply click a button and it inserts it. I’m not saying to add 100’s of buttons to the TinyMCE for all your shortcodes (I hate when developers do this, it’s such bad practice and looks horrible) but if you add 1 or a few I’ll let it pass 😉 If you want to add a bunch, then you should create a submenu as explained in the section that follows.
PHP Code – Declare the new MCE plugin in WP
This code will declare your new MCE plugin be sure to change the location of the javascript file “mce-button.js” to match the location of your file (which I will give you the code for as well in the next subsection) as well as obviously rename the prefix “my” to something more unique!
// Hooks your functions into the correct filters
function my_add_mce_button() {
// check user permissions
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}
// check if WYSIWYG is enabled
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
add_filter( 'mce_buttons', 'my_register_mce_button' );
}
}
add_action('admin_head', 'my_add_mce_button');
// Declare script for new button
function my_add_tinymce_plugin( $plugin_array ) {
$plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js';
return $plugin_array;
}
// Register new button in the editor
function my_register_mce_button( $buttons ) {
array_push( $buttons, 'my_mce_button' );
return $buttons;
}
JS Code – Add the button to the MCE
This js code goes in the js file registered in the snippet above in the “symple_shortcodes_add_tinymce_plugin” function. This should add a new text button that says “New Button” into your editor and when clicked it will insert the text “example.com is awesome!” (of course).
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton('my_mce_button', {
text: 'New Button',
icon: false,
onclick: function() {
editor.insertContent('example.com is awesome!');
}
});
});
})();
Add A Custom Icon To Your New MCE Button
Above I showed you how to add a new button that will display as “New Button” in the editor, this is a bit lame…So the altered code will show you how to add your own custom icon.
Load a stylesheet with your CSS
Use this function to load a new stylesheet for use in your admin panel – some plugins/themes might already be adding a stylesheet so if your theme/plugin is doing that skip this and just add your custom CSS and tweak the js (shown below).
function my_shortcodes_mce_css() {
wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );
Your Custom CSS
This is the CSS to add the the stylesheet loaded previously.
i.my-mce-icon {
background-image: url('YOUR ICON URL');
}
Tweak your Javascript
Now simple tweak the javascript which you added previously to remove the text parameter and instead of setting the icon to false give it a custom classname.
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
icon: 'my-mce-icon',
onclick: function() {
editor.insertContent('example.com is awesome!');
}
});
});
})();
Adding A Pop-Up Window To Your Button on Click
In the example above you might notice that every button simply inserts the text “example.com is awesome!” which is cool, but what about creating a pop-up window where a user can alter what’s being inserted into the text? Now that would be sweet! And it’s something I’ve added to version 1.6 of my Symple Shortcodes, making the plugin a lot more user-friendly.
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
text: 'Sample Dropdown',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Item 1',
menu: [
{
text: 'Pop-Up',
onclick: function() {
editor.windowManager.open( {
title: 'Insert Random Shortcode',
body: [
{
type: 'textbox',
name: 'textboxName',
label: 'Text Box',
value: '30'
},
{
type: 'textbox',
name: 'multilineName',
label: 'Multiline Text Box',
value: 'You can say a lot of stuff in here',
multiline: true,
minWidth: 300,
minHeight: 100
},
{
type: 'listbox',
name: 'listboxName',
label: 'List Box',
'values': [
{text: 'Option 1', value: '1'},
{text: 'Option 2', value: '2'},
{text: 'Option 3', value: '3'}
]
}
],
onsubmit: function( e ) {
editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
})();
That’s all. This is cool…