Add select field to TinyMCE to change line height

mce_buttons_2 tiny_mce_before_init
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function add_style_select_button($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'add_style_select_button');
 
 
function my_mce_before_init_insert_formats( $init_array ) {
 
    $style_formats = array(
        // These are the custom styles
        array(
            'title' => 'line 2',
            'block' => 'span',
            'classes' => 'line20',
            'wrapper' => true,
        ),
        array(
            'title' => 'line 3',
            'inline' => 'span',
            'classes' => 'line30',
            'wrapper' => true,
        ),
    );
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );
 
    return $init_array;
 
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

css

1
2
3
4
5
6
7
/* custom css */
.line20 {
    line-height: 2em;
}
.line30 {
    line-height: 3em;
}