# Adding new formatting options to RTF fields

**URL:** <https://community.bloomreach.com/t/adding-new-formatting-options-to-rtf-fields/4184>\
**Category:** Experience Manager (PaaS/OnPrem)\
**Created:** [November 21, 2023, 8:21am UTC](https://community.bloomreach.com/t/adding-new-formatting-options-to-rtf-fields/4184 "2023-11-21T08:21:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tadelbauer](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/tadelbauer/32/1837_2.png) [@Tadelbauer](https://community.bloomreach.com/u/Tadelbauer)\
**Post date:** [November 21, 2023, 8:21am UTC](https://community.bloomreach.com/t/adding-new-formatting-options-to-rtf-fields/4184/1 "2023-11-21T08:21:13Z")

</div>

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](https://xmdocumentation.bloomreach.com/library/concepts/document-types/html-fields/customize-ckeditor-styles.html)

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:

```auto
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](https://canada1.discourse-cdn.com/flex027/uploads/bloomreach1/original/2X/a/a4e062eec9c7994df8f84c609bae7a14a33572a9.png)

Then we select “Normal 15”:

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/bloomreach1/original/2X/f/f3fcbf33a707c4200e3b71d924481b0e5984bcd0.png)

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

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/bloomreach1/original/2X/7/70829014ef5b6e8a442dee6a298fef12d8fafeab.png)

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![jasper.floor](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/jasper.floor/32/28_2.png) [@jasper.floor](https://community.bloomreach.com/u/jasper.floor)\
**Post date:** [November 28, 2023, 3:02pm UTC](https://community.bloomreach.com/t/adding-new-formatting-options-to-rtf-fields/4184/2 "2023-11-28T15:02:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Tadelbauer](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/tadelbauer/32/1837_2.png) [@Tadelbauer](https://community.bloomreach.com/u/Tadelbauer)\
**Post date:** [November 29, 2023, 7:07am UTC](https://community.bloomreach.com/t/adding-new-formatting-options-to-rtf-fields/4184/3 "2023-11-29T07:07:04Z")

</div>

Hi Jasper,

thanks for checking the bug and the info.

Cheers,  
Thomas