CKEditor and extra allowed content

[AAD Web Team]

I have the following code in my config.js file. All of it works except the 'extraAllowedContent' line. I realise there is an 'Extra allowed content' option within the settings for individual fields (and if I add p(tip) to that it works perfectly), but I was hoping I might be able to set up some global allowed classes.

Any ideas why my config.extraAllowedContent = 'p(tip)'; line might not work?

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.uiColor = '#AADC6E';
	config.coreStyles_italic = { element: 'i' };
	config.disallowedContent = '*{*}'; // All inline styles disallowed
	config.extraAllowedContent = 'p(tip)';
	config.language_list = [ 'la:Latin' ];
};

I can of course use config.allowedContent instead, but then I have to specify each and every allowed element. I was hoping to use the default allowed content and then just add some classes. According to the CKEditor documentation this should be possible, so I'm wondering if ProcessWire is overriding this setting somehow. Or perhaps I haven't done it correctly?

Given you helped me with my previous CKEditor question, @Robin S, I'm wondering if you might know the answer?

Thanks!

Margaret

[Robin S]

21 minutes ago, AAD Web Team said:

Any ideas why my config.extraAllowedContent = 'p(tip)'; line might not work?

I think you may need a semicolon inside the quotes.

config.extraAllowedContent = 'p(tip);';

The CKEditor docs are not 100% clear about when semicolons are needed but you can see them included in some sample code here: https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html#custom-mode

[AAD Web Team]

Great tip, thanks, but unfortunately it hasn't made any difference...

2 minutes ago, Robin S said:

I think you may need a semicolon inside the quotes.

config.extraAllowedContent = 'p(tip);';

The CKEditor docs are not 100% clear about when semicolons are needed but you can see them included in some sample code here: https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html#custom-mode

 

[AAD Web Team]

I've just worked out a possible workaround, and that is to add classes to the styles drop-down in the toolbar. Once they're on there, they're allowed.

However, I'm still curious if there's a solution to my query here, because it seems like it should work.

[Robin S]

34 minutes ago, AAD Web Team said:

However, I'm still curious if there's a solution to my query here, because it seems like it should work.

I reckon it's a bug. I opened a GitHub issue with a possible fix: https://github.com/processwire/processwire-issues/issues/627

[AAD Web Team]

Oh great, thanks for doing that @Robin S! ?