Adding CSS to admin TinyMCE editor for custom button

Question

I have created a plugin that adds a new button to the TinyMCE editor in the admin edit pages/posts area. I am trying to apply a font icon to it as per the the other buttons in Wordpress 3.8. I have created a CSS file will the following:

.mce_mybutton::before {
    content: '\f459';
}

All I need to do is load the CSS when the editor is loaded... Seemed easy.

I tried add_editor_style() but apparently it is only for theme development not plugins

I found the mce_css filter but it didn't work. I think it is for only applying CSS to the content in the editor... Not the buttons.

I read the source code for the edit-from-advanced.php and class-wp-editor.php the files responsible for generating the editor on the admin edit pages/posts. There is a setting within the _WP_Editors object that looked promising:

'editor_css' => '', // intended for extra styles for both visual and Text editors buttons, needs to include the <style> tags, can use "scoped".

However I couldn't find a way to hook into it.

Any help would be appreciated.

Thanks!

Answer 1

First, I believe your css should use only one colon:

.mce_mybutton:before {
    content: '\f459';
}

Now, in order to get the css to the proper place. First, we add an action to admin_print_styles; then we check to see if we are editing a post or page; then we enqueue our stylesheet.

We run the check to see if we are editing, so that we don't enqueue our stylesheet on every admin page. We do this to minimize conflicts with other plugins/themes; and since it makes no common sense to run code on pages where it is not needed.

So... we end up with a function like this:

add_action('admin_print_styles', 'add_my_tinymce_button_css');
function add_my_tinymce_button_css() {

    // Get current screen and determine if we are using the editor
    $screen = get_current_screen();
    // If we are editing (adding new) post or page
    if ( $screen->id == 'page' || $screen->id == 'post' ) {

        // Register our stylesheet
        // Note: The stylesheet resides in our plugin directory/css/admin.css
        // You may change this to suit your preferences
        wp_register_style('my_tinymce_button_css', plugin_dir_url( __FILE__ ) . ('/css/admin.css'), array());

        // Now we enqueue our stylesheet
        wp_enqueue_style('my_tinymce_button_css');

        // Depending on when you fire things, you may/may not need to enqueue 'dashicons'
        wp_enqueue_style('dashicons');
    }
}