TinyMCE stacks classes

Question

I'm using TinyMCE 4 as my default editor. In the config I specified style formats. This works excuistly except for one thing: it stacks classes.

My style format:

style_formats: [
        { title: 'Heading 2', block: 'h2', classes: 'heading-02' },
        { title: 'Heading 3', block: 'h3', classes: 'heading-03' },
        { title: 'Heading 4', block: 'h4', classes: 'heading-04' },
        { title: 'Heading 5', block: 'h5', classes: 'heading-05' },
        { title: 'Text', block: 'p', classes: 'copy-02' },
    ],

After selecting text and switching between format, the end result looks like this:

<h4 class="heading-02 heading-03 heading-04">example</h4>

Obviously there should be no other classes than heading-04 alone. But non the less it adds them anyways.

My question therefore is, how can I make sure there is only 1 class after a format switch.

I'd love to hear an anwser to this. That being said, I have a workaround. In my particular case the heading-02 has a fallback, namely h2. So in my case I will just remove classes in all and just use block level elements which switch fine. But I can most def see a scenario in which this does matter. — Matt

grajsek grajsek · Accepted Answer · 2016-09-22T14:13:41

Add style_formats_merge: true

style_formats_merge

This option allows you to set whether TinyMCE should append the styles in the style_formats setting to the default style formats or completely replace them.

Source

TinyMCE stacks classes

1 Answers