Show class from css in format dropdown

Question

is possible to show class directly from css in format dropdown?

I try this but doesn't work

First create format button

function add_editor_buttons($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'add_editor_buttons');

Second set content css with path to my css and set the append of class in dropdwon TRUE

function my_format_TinyMCE( $in ) {
    $in['content_css'] = get_template_directory_uri() . "/custom.css";
    $in['importcss_append'] = TRUE;
    return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );

Editor now show the style correctly but the dropdown don't show the list of class in custom.css.

Any idea? Thanks so much!!!

Answer 1

Array value 'content_css' is not enough, TinyMCE can't simply get the classes from the custom.css file. You need to define the list of styles you want in the dropdown:

function my_format_TinyMCE( $in ) {
    $in['content_css'] = get_template_directory_uri() . "/custom.css";
    $in['importcss_append'] = TRUE;
    $in['style_formats'] = json_encode(array(
        array('title' => 'Title for Style #1', 'classes' => 'example-class'),
        array('title' => 'Title for Style #2', 'classes' => 'example-class-two'),
    ));
    return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );

For the full format of what can be included in the 'style_formats', check out TinyMCE documentation: Style Formats in TinyMCE. Make sure it has to be in JSON format (that is why I used the json_encode function.