Nested elements in TinyMCE “Styles” dropdown

I’ve been using “tiny_mce_before_init” in WordPress to add my own custom styles to the style dropdown in the editor.

Everything has been working fine but now I need to add a style that doesn’t just add one element but two. Do you know if that’s possible?

Read More

Here’s how I’m adding single elements:

<?php
add_filter('tiny_mce_before_init', 'my_tinymce_styles');

function my_tinymce_styles ($init) {
    $styles = array(
        array(  
            'title' => 'Small',
            'inline' => 'small',
            'wrapper' => false
        ), 
        array(  
            'title' => 'Bar',
            'block' => 'div',
            'classes' => 'bar',
            'wrapper' => true
        )
        # Etc...
    );

    # Insert the array, JSON ENCODED, into 'style_formats'
    $init['style_formats'] = json_encode($styles);

    return $init;
}

And this works as expected. The user selects some text, chooses “Bar” from the “Styles” dropdown and the text is wrapped in <div class="bar">...</div>.

However, now I need to do that same but add <div class="section"><div class="inner">TEXT_HERE</div></div> – how can I do that?

Related posts

Leave a Reply