0

I use custom TinyMCE Formats in my wordpress editor. Actually i use just two formats which i created in the functions.php:

/* TINY MCE FORMATE */
function my_mce_before_init_insert_formats( $init_array ) {  
    $style_formats = array(  
        array(  
            'title' => 'Button',  
            'selector' => 'a',  
            'classes' => 'btn'             
        ),          
        array(  
            'title' => 'Download',  
            'selector' => 'a',  
            'classes' => 'download'             
        ),          
    ); 

    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 

add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

This works perfect and i can choose them in the formats tab: enter image description here

But now i need more formats and i want to group the formats in a hover-menu called "Links". The standard tinymce groups the headings, inline, blocks and aligning in hover-menus: enter image description here

How can i group my custom formats?

1
  • 1
    You must accept kshaner's answer if that helps you. Mar 8, 2018 at 11:18

1 Answer 1

4

You can group styles using the items key - you can nest multiple times too!

/* TINY MCE FORMATE */
function my_mce_before_init_insert_formats( $init_array ) {  
    $style_formats = array(  
        array(  
            'title' => 'Buttons',
            'items' => array(
                array(
                    'title' => 'Green',
                    'selector' => 'a',
                    'classes' => 'btn--green'
                )
                array(
                    'title' => 'Blue Button',
                    'selector' => 'a',
                    'classes' => 'btn--blue'
                )
            ),
        ),          
        array(  
            'title' => 'Download',
            'items' => array(
                array(
                    'title' => 'Style 1',
                    'selector' => 'a',  
                    'classes' => 'download-style-1'
                ),
                array(
                    'title' => 'Style 2',
                    'selector' => 'a',  
                    'classes' => 'download-style-2'
                )
            )
        )
    ); 

    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  
} 

add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

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.