Adding new formatting options to RTF fields

Experience Manager (PaaS/OnPrem)
1

Hello,

We tried to add some new formatting options to our RTF fields and used this documentation: Customize CKEditor styles - Bloomreach Experience Manager (PaaS/Self-Hosted) - The Fast and Flexible Headless CMS

We were able to add all the options localized and correctly, so this should be fine.
But then we encountered a strange behavior.

We changed the options to a simpler design to better show the problem.
Now this is the setting:

CKEDITOR.stylesSet.add('mystyle', [
{
  element: 'p',
  name: 'Normal' 
},
{
  element: 'p',
  name: 'Normal 15',
  styles: {
      'font-size': '15px'
  }
},
{
  element: 'h1',
  name: 'Überschrift 1' 
}
]);

Basically we want to have the three formatting options in the RTF fields (for this example, in reality there will be more):
• Normal (default p-Tag)
• Normal 15 (p-Tag with font-size 15px)
• Headline 1 (default h1-Tag)

According to the documentation we tried to add the options as pictured above. Basically it worked.

But the problem is the following:
As soon as we select “Normal 15” for a text, the font-size: 15px is kept as style, even if we change the formatting to Normal or “Headline 1”.

So we start with “Normal”, everything is ok:
image

Then we select “Normal 15”:

image
image691×170 17.4 KB

But if we switch to Headline 1, the font-size: 15px is still set:

image
image855×167 20.1 KB

This also is the case, when I switch back to “Normal”.
The font-size: 15px is still there and it is never deleted.

Then we tried the following workaround in the config to clear the font-size:

CKEDITOR.stylesSet.add('mystyle', [
{
  element: 'p',
  name: 'Normal',
  styles: {
      'font-size': ''
  }
},
{
  element: 'p',
  name: 'Normal 15',
  styles: {
      'font-size': '15px'
  }
},
{
  element: 'h1',
  name: 'Überschrift 1',
  styles: {
      'font-size': ''
  }
}
]);

This works for switching back to “Normal”, because the style is deleted correctly.

But If we switch from Normal 15 to Headline 1, the font-size: 15px is still there for h1.

How can we configure this, so that this works correctly? We also tried things like ‘font-size’: ‘unset’ or styles: null, but nothing worked.

Thanks for your help,
Thomas

2

Hi,

I’ve asked some internal experts to look at this. We believe this a bug in Ckeditor. Unfortunately that product is end of life. We are not able to fix it ourselves and CKeditor will not. We are looking to replace CKeditor in the future, but I can give you no timeline on that, nor does that help you now.

3

Hi Jasper,

thanks for checking the bug and the info.

Cheers,
Thomas