tinyMCE styles do not apply correct class

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
Vote:
 

Anyone who have encounted the same problems?

#148430
May 12, 2016 16:56
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
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.