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 Answer 1

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? Sep 10, 2017 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. Sep 10, 2017 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. Sep 10, 2017 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. Sep 10, 2017 at 8:55

Your Answer

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

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