tinyMCE styles do not apply correct class

Mads Gosvig

Vote:

Hi,

So I have configured the tinyMCE to include alot of styles, and only some of them are working.

I have created the Editor.css file and refrenced it in the project (latest updates as of 06-04-2016 for both CMS and Commerce)

The Editor.css contains:

h2.font-h1{
    EditMenuTitle: Heading Styles;
    EditMenuName: H1;
    ChangeElementType: true;
    font-size: 2.25rem;
    line-height: 2.375rem;
}
  
h2.font-h1.font--big{
    EditMenuName: H1 Big;
    ChangeElementType: true;
    font-size: 3.5rem;
    line-height: 3.5rem;
}

And many more styles.

The problem is that the classes does not get applied correctly.

As far as I know the above should create:

 ...text... 
 ...text...

But right now when I apply the styles I get the following:

This is H1

This is H1-big

Can anyone spot a problem with my Editor.css file, or is this a common problem with tinyMCE?

#147116

Apr 06, 2016 14:46

Mads Gosvig

Vote:

Anyone who have encounted the same problems?

#148430

May 12, 2016 16:56

Matthew Boniface

Vote:

Hi Mads

I thought the same as you. As it turns out, you need to put spaces between all subsequent classes. So, for yours, you need to have the following:

h2.font-h1 .font--big{
    EditMenuName: H1 Big;
    ChangeElementType: true;
    font-size: 3.5rem;
    line-height: 3.5rem;
}

Hope this helps you (although realise it has been 18 months!) or someone else :)

Matt

#185899

Dec 05, 2017 23:18