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
    You must accept kshaner's answer if that helps you. – hayatbiralem Mar 8 '18 at 11:18
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, privacy policy and cookie policy

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