Search code examples
javascripttinymce

How to remove old tinymce style_format classes when changing / updating format


I have created some custom style formats, that add a class to a block level element. The problem is that when I apply one style it keeps the old class and adds the new class.

How do I remove the old class when switching to another format?

mce_options_article = {
        // ...
        formats: {
          p_grey: { selector: 'p', classes: 'grey' },
          p_red: { selector: 'p', classes: 'red' } 
        },
        style_formats: [
          {title: 'Paragraph Color', items: [
            {title: 'Grey ', format:'p_grey'},
            {title: 'Red ', format:'p_red'},
           ]},
        ]
        // ...
    }

Solution

  • Use attributes instead of classes.

    This is what I did:

    mce_options_article = {
        // ...
        formats: {
          p_grey: { selector: 'p', attributes: {'class':'grey'} }, // use attributes
          p_red: { selector: 'p', attributes: {'class':'red'} } // use attributes
        },
        style_formats: [
          {title: 'Paragraph Color', items: [
            {title: 'Grey ', format:'p_grey'},
            {title: 'Red ', format:'p_red'},
           ]},
        ]
        // ...
    }