TinyMCE Styles Dropdown not adding html tags other than span

1 Views

I am trying to add h1,h2 .. in the TinyMCE Styles Dropdown with my other html elements. I have tried the following code, but the problem is it only adds styles if I use span as ‘block’ value. If I use div, h3, h4, the code doesn’t add anything

I have searched a lot for the solution but haven’t found anything helpful.

Read More

Could you please tell me how to fix this problem?

FYI: I am using wordpress 3.5.1 

function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
// Define the style_formats array
$style_formats = array(  
    // Each array child is a format with it's own settings
    array(  
        'title' => 'Head',  
        'block' => 'h4',  
        'classes' => 'headings',
        'wrapper' => true,

    ),  
    array(  
        'title' => 'Sub Heading',  
        'block' => 'span',  
        'classes' => 'subheadlines2',
        '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' );
Post Views: 1

Related posts

2 comments

  1. Ran into the same issue, try taking the wrapper value out of your settings array.

    array(  
    'title' => 'Head',  
    'block' => 'h4',  
    'classes' => 'headings'
),

  2. I think there’s a misunderstanding…

    what you are trying to do is overwrite the text editor default styles…
    this is quite easy, just include in functions.php:

    add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); 

function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

    AND CREATE A custom-editor-style.css where you overwrite css classes:

    #tinymce {}

#tinymce h1 {}    
#tinymce h2 {}
#tinymce h3 {}

    in the formats dropdown you cannot overwrite default classes, but you can generate new ones. As you noticed these will always build a span or div container around the content you want to format. Unfortunately you cannot stack inner classes for this goal, except you edit the text in html and not the visual editor.

Comments are closed.