I have added some custom styles to the TinyMCE editor using the tiny_mce_before_init filter hook. They work by adding classes to the block-level element. See the code below:

function byron_mce_before_init($settings) {
    $style_formats = [
        [
            'title' => 'Lead',
            'block' => 'p',
            'classes' => 'lead',
        ],
        [
            'title' => 'Tagline',
            'block' => 'h5',
            'classes' => 'tagline',
        ],
    ];
    $settings['style_formats'] = json_encode($style_formats);
    return $settings;
}
add_filter('tiny_mce_before_init', 'byron_mce_before_init');

The problem I am having, is that when switching between the styles defined above, the class is not removed; in stead, the new class is appended to the old class in stead of replacing it. I can’t seem to figure out how to remove the old classes when switching between styles. Any help would be greatly appreciated.

3 s
3

Seems the question was asked at community.tinymce.com and the answer is here:
https://community.tinymce.com/communityQuestion?id=90661000000IiyjAAC

You can’t make the style you’ve defined remove any previous classes, but what you can do is ‘apply’ the style again by selecting it from the dropdown list and it will be removed – i.e. the class will be removed from the tag. You can then choose a different style from the drop-down list and the class relevant to that style will be added to the tag.

Leave a Reply

Your email address will not be published. Required fields are marked *