0

I've added the styles dropdown list to my TinyMCE editor in Wordpress. If I select the style, and preview it on the front end, it looks exactly like I expect it to. However, I'd like to preview it in the editor as well.

By adding my '.blue-button' class to /wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css, I was able to preview it like I want to, but this seems hackish and will probably break upon a TinyMCE update. Is there a filter to do this?

So far I have the following: 

add_filter('tiny_mce_before_init', 'customizeWYSIWYGToolbar' );
function customizeWYSIWYGToolbar($init) {
    $init['theme_advanced_buttons2_add_before'] = 'styleselect'; // Adds the buttons at the begining. (theme_advanced_buttons2_add adds them at the end)
    $init['theme_advanced_styles'] = 'Blue Button=blue-button';
    $init['theme_advanced_disable'] = 'underline, justifyfull, charmap, pasteword';
    return $init;
}

add_filter( 'mce_css', 'tdav_css' );
add_editor_style('css/admin.css');

add_action('init', 'WYSIWYGCSS');
function WYSIWYGCSS(){
    wp_enqueue_style( 'wysiwygStyles', get_bloginfo('stylesheet_directory').'/css/admin.css', ",",'all' ); 
}

Thanks!

Improve this question

1 Answer 1

Reset to default
1

You're looking for add_editor_style(). Just drop that in your functions.php file and then put an editor-style.css file in your theme with whatever styles you want.

Improve this answer
1
  • Meant to respond a long time ago. This worked, but not without accidentally clearing some kind of cache. I had to make my after_setup_theme action hook ONLY contain add_editor_style, save, refresh a dashboard page, then add the rest of my after_setup_theme code back.
    – LOLapalooza
    Sep 13, 2012 at 20:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.