Ckeditor: stylesSet not working when I set custom allowedContent

Question

In my Ckeditor configuration, I have custom allowedContent. I do not use allowedContent:true because I do not want to allow the style attribute in span tags

So this is my allowed content

 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;' 

In this configuration, style attributes are no longer allowed in span tags

The problem with my styles:

 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" } } 

Previously, when I had allowedContent:true , I could see and use all my 5 sets of styles, but now for some reason I see only "style 5" in the "Styles" field

Is it possible to save 5 allowedContent:true without using allowedContent:true ?

thanks a lot

Answer 1

It seems your 5 styles use the class attribute, but your allowedContent rule allowedContent allows the class attribute for 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;' 

Refer to the documentation here .

Note. I could not verify this code, please let me know in the comments if it does the job.