0

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!!!

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.

4
  • in my case i can't add every class from code. But there isn't possibility to import the class directly from specify css? – Stefano Vet Sep 10 '17 at 8:34
  • TinyMCE can't do that. You need to specify these classes with titles (required), and maybe some other elements (inline or block, target tags). You can write the CSS parser in PHP that can parse your CSS and generate the list of styles, but that might be overkill, it is better to do this manually. – Milan Petrovic Sep 10 '17 at 8:36
  • I have just do it in a custom app but in wordpress don't work. archive.tinymce.com/wiki.php/Configuration:importcss_append The importcss_append add class in format dropdown. – Stefano Vet Sep 10 '17 at 8:53
  • WordPress uses modified TinyMCE, so not everything will work the same way. But, for what you need, in TinyMCE in WordPress, you need to manually list the styles you want to add, or create parser to do it for you. – Milan Petrovic Sep 10 '17 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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