Ckeditor : stylesSet not working when i set a custom allowedContent

Question

In my Ckeditor config i have a custom allowedContent. I don't use allowedContent:true because i don't want to allow the style attribute in the span tags

So this is my allowedContent

allowedContent : 'span[class]; a[!href](*);  caption; div; em; h1; h2; h3; h4; h5; h6; hr; i; img; li;  ol; p[*]{*}; pre; strong; sub; sup; table; thead; tbody; tfoot; td; th; tr; tt; u; ul; dl; dt; dd; iframe;'

With this configuration, the style attributes are not allowed anymore on the span tags

The problem is with my stylesSets :

stylesSet:
      - { name: "style 1", element: ['div', 'p', 'a', 'span'], attributes: { class:"display_only_in_popup" } }
      - { name: "style 2", element: ['div', 'p', 'a', 'span'], attributes: { class:"blockquote" } }
      - { name: "style 3", element: ['div', 'p', 'a', 'span'], attributes: { class:"note" } }
      - { name: "style 4", element: ['p', 'span'], attributes: { class:"highlight" } }
      - { name: "style 5", element: 'span', attributes: { class:"visuallyhidden" } }

Before, when i had allowedContent:true, i was able to see and use all of my 5 stylesets, but now, for some reason, i only see the "style 5" in the Styles field

Is it possible to keep my 5 stylesets without using allowedContent:true?

Thanks a lot

I would leave allowedContent to its default value and make changes instead to extraAllowedContent — Wizard

Gyum Fox Gyum Fox · Accepted Answer · 2017-06-01T09:12:25

It seems that your 5 stylesets all use the class attribute, but your allowedContent rule only allows the class attribute for the span elements.

I suggest changing the allowedContent rule to:

allowedContent : '*[class]; a[!href](*);  caption; div; em; h1; h2; h3; h4; h5; h6; hr; i; img; li;  ol; p[*]{*}; pre; strong; sub; sup; table; thead; tbody; tfoot; td; th; tr; tt; u; ul; dl; dt; dd; iframe;'

or if you want to be more explicit:

allowedContent : 'div[class]; p[class]; a[class]; span[class]; a[!href](*);  caption; div; em; h1; h2; h3; h4; h5; h6; hr; i; img; li;  ol; p[*]{*}; pre; strong; sub; sup; table; thead; tbody; tfoot; td; th; tr; tt; u; ul; dl; dt; dd; iframe;'

Please refer to the documentation here.

Note: I was not able to test this code, please let me know in the comments if it does the job.

Ckeditor : stylesSet not working when i set a custom allowedContent

1 Answers