Custom CKEditor Stylings

Hey guys,

I currently try to develop an extension for CKEditor in the new UI which should enable inline coloring of text. I followed the demos given in neos-ui-extensibility-examples.
The buttons show up in the backend also the styling is applied. But every time the backend reloads, it strips all my custom spans from the source.

My extension consists of the following code snippet, just replicated four times with different color names.

formattingRules.set('Obis.Site.Extensions:TextColor.Blue.Rule', {
  style: { element: 'span', attributes: { class: 'obis-site-extensions-textcolor-blue-rule' } },
  config: formattingRules.config.addToExtraAllowedContent('span.obis-site-extensions-textcolor-blue-rule')

richtextToolbar.set('Obis.Site.Extensions:TextColor.Blue', {
  formattingRule: 'Obis.Site.Extensions:TextColor.Blue.Rule',
  component: IconButton,
  callbackPropName: 'onClick',

  title: 'Color Text Blue',
  icon: 'circle',
  hoverStyle: 'brand'

As far as I understand, formattingRules.config.addToExtraAllowedContent() should allow my custom span to be added to and kept in the DOM. But still it disappears somehow.
Strange thing is, that it doesn’t change immediately, instead it keeps showing the colors for round about one second then the described behaviour comes up.

Any suggestions on what’s wrong with my code? Or is it not my fault?
I asked this round about 20 times in Slack but no one noticed, therefore I’m asking here.

Thanks a lot in advance, Max

Hey Maximilian,

Actually the CKEditor allowedContent configuration is problematic here; and it’s kinda hard to get right - best place is to check the syntax in

IMHO the correct selector should be span(obis-site-extensions-textcolor-rule)

Also ensure you end with a semi-colon; otherwise you’ll break followup configurations maybe.

For a working example, see the Sandstorm.BlockStyles package; specifically this line:

All the best,

PS: sorry for the long delay for answering. Just noticed the post :slight_smile:

1 Like

Thanks a lot @sebastian that really helped me out. :blush: