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.

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.

• functions
• theme-development
• wp-admin
• tinymce

• This looks a question about the inner workings of tiny mce. You have a better chance getting an answer here: community.tinymce – cjbj Commented Jun 7, 2018 at 8:34
• Thanks, I'll have a look. I asked here because I am using WordPress functions. But I guess the array is just passed to TinyMCE – Connor Commented Jun 7, 2018 at 9:03

3 Answers 3

Seems the question was asked at community.tinymce and the answer is here: https://community.tinymce/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.

You CAN overwrite the old classes.

Instead of:

'classes' => 'lead'

Use this:

'attributes' => array('class' => 'lead')

I had a similar issue

let doNotRemoveFormat = false;

tinymce.init({
style_formats:  [
              {title: 'Footer - 11px', inline: 'span', classes: 'admin-footer'},
              {title: 'Standard - 14px', inline: 'span'},
              {title: 'Heading 1 - 19px', inline: 'span', classes: 'admin-heading-1'},  
              {title: 'Heading 2 - 22px', inline: 'span', classes: 'admin-heading-2'}  
            ],
setup: function (ed) {
  ed.on('ExecCommand', function checkListNodes (evt) {
if (cmd === 'mceToggleFormat') {
    if(!doNotRemoveFormat) {  
      let val = 'runThis|' + evt.value;
      this.execCommand('RemoveFormat', false, val);
    } else {
      doNotRemoveFormat = false;
    }
} else if (cmd === 'RemoveFormat') {
  let value = evt.value.split("|");
  if(value[0] === 'runThis') {
    doNotRemoveFormat = true;
    this.execCommand('mceToggleFormat', false, value[1])
  }
});