TinyMCE Styles Dropdown not adding html tags other than span

Question

TinyMCE Styles Dropdown not adding html tags other than span

black_belt

2022年5月20日 22:07

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' );

Topic tinymce plugin-development plugins Wordpress

Category Web

Canelo Digital · Accepted Answer · 2017年2月24日 19:56

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.

Dale Sattler · Accepted Answer · 2014年3月25日 09:12

1

Dale Sattler answered at 2014年3月25日 09:12

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

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

TinyMCE Styles Dropdown not adding html tags other than span

About