The process of adding a new button to the WordPress visual editor is fairly simple; as long as you understand how to develop a new TinyMCE plugin (which is a somewhat involved and laborious process that I will probably cover at another time).
One thing I discovered yesterday, though, is that one line of code makes the difference between the Visual Editor using a custom, static image as the button and the Visual Editor using a span that you can stylize with CSS (to fit better with the native Visual Editor appearance).
In your TinyMCE plugin definition file (editor_plugin.js), when you use the addButton method for the editor, if you define an img property for that object, a custom, static image will be used. However, if you do not define that property, the Visual Editor will instead create an empty span with the class of mceIcon and a secondary class of mce_[plugin_name].
The [plugin_name] variable shown above is the name you assign to the plugin class instance when you use the tinymce.pluginManager.add method.
Therefore, the two pertinent snippets of your code might look like:
/* Open your plugin code with a tinymce.create method
and some other code*/
// Register example button
ed.addButton('my_mce_button', {
title : 'This is a button',
cmd : 'myButtonCmd'
});
/* More code in here */
// Register plugin
tinymce.PluginManager.add('myButton', tinymce.plugins.myButtonPlugin);Notice that the code above does not include an img property in the addButton method. That means that WordPress and TinyMCE will automatically assign a class of mce_myButton to an empty span where the button is supposed to appear in the visual editor.
Then, instead of using a static image, you can use CSS to stylize the span, adding background images for the normal state of the span and the hover state.
If you do, however, include the img property (which might look something like the code below), TinyMCE/WordPress will use that image for the button, meaning that the normal state and the hover state of the button will look basically the same (the background image that WordPress uses to create the border around the buttons will still change slightly when you hover over the button, though).
// Register example button
ed.addButton('my_mce_button', {
title : 'This is a button',
cmd : 'myButtonCmd',
image : url + '/img/myButton_icon.gif'
});
4 Responses
Any advise on how to apply styles to the TinyMCE editor in WordPress? I’ve followed your suggestion on a custom button I’d added and removed the image, but now find I’m unable to apply the style. I’d prefer to be able to do this via my own code rather than tinker with the TinyMCE CSS.
David.
Are you asking how to apply styles to your new button, or are you asking how to style the content of the editor?
To apply styles to your button, you’ll need to register and enqueue a stylesheet for your plugin and apply styles to the class
.wp_themeSkin span.mce_[plugin_name]. That code might look like:.wp_themeSkin span.mce_gce_esc {background: url(' . plugins_url( '/tinymce/img/my-plugin-icon.png', __FILE__ ) . ') no-repeat 0 -20px;
}
.wp_themeSkin span.mce_gce_esc:hover {
background-position: 0 0;
}
If you want to actually apply styles to the content of the editor, you need to use the
add_editor_style()function.Thanks. I might have got confused by some rather more complex ways of applying styles to TinyMCE (yes, it was styling the new button that I was after).
One last question… how do I register a stylesheet to work in the editor?
David.
You can either create a new CSS file and register/enqueue it with some code similar to the following.
add_action( 'init', 'myplugin_enqueue_style' );function myplugin_enqueue_style() {
if( is_admin() ) {
wp_register_style( 'myplugin-mce-styles', plugin_url( 'myplugin-mce.css', __FILE__ ), array( 'post' ), 0.1 );
wp_enqueue_style( 'myplugin-mce-styles' );
}
}
More information about the
wp_register_style()andwp_enqueue_style()functions can be found in the WordPress codex.Or, if you won’t be using too much CSS, you can simply output it to the screen with code similar to the following:
add_action( 'admin_print_styles', 'myplugin_print_admin_styles' );function myplugin_print_admin_styles() {
print '
.wp_themeSkin span.mce_myplugin {
background: url(' . plugins_url( '/tinymce/img/calendar-icon.png', __FILE__ ) . ') no-repeat 0 -20px;
}
.wp_themeSkin span.mce_myplugin:hover {
background-position: 0 0;
}
';
}