1

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.

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' ); 
  • First, please update. Core doesn't support outdated versions and neither does this site. – kaiser Oct 1 '13 at 13:49
0

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

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

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.

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.