Custom CKEditor Stylings

mschmidt · February 13, 2018, 2:47pm

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

sebastian · February 25, 2018, 5:28pm

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 https://docs.ckeditor.com/ckeditor4/latest/guide/dev_allowed_content_rules.html#string-format

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:

github.com

sandstorm/BlockStyles/blob/master/Resources/Private/JavaScript/BlockStyles/src/manifest.js#L49


			if (elementPath && elementPath.block) {
				const classNames = elementPath.block.getAttribute('class');
				return {classes: classNames && classNames.split(' ')};
			}
			return null;
		},
		config: (configSoFar, formattingEditorOptions) => {
		    const blockStylePresetName = formattingEditorOptions;
		    const blockStylePreset = stylePresets[blockStylePresetName];
		    const classNames = [].concat(...Object.keys(blockStylePreset).map(k => Object.keys(blockStylePreset[k].options)));
		    return formattingRules.config.addToExtraAllowedContent(classNames.map(cssClassName => `p(${cssClassName})`).join(';'))(configSoFar);
}


	});
});

All the best,
Sebastian

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

mschmidt · February 27, 2018, 8:21am

Thanks a lot @sebastian that really helped me out.