<figure> in stylesSet does not wrap <img>

[Osvaldas]

I define this in config:

stylesSet	: [ { name: 'Figure', element: 'figure' } ]

In the editor, when I select an image (<img>) and then select "Figure" from the styles list, I get this (view source):

<figure alt="" src="img.jpg"> </figure>

...instead of this:

<figure><img alt="" src="img.jpg"></figure>

There's something wrong with <figure> treatment in the editor, because if I change "figure" to "span" in stylesSet, the image gets nicely wrapped.

[Jakub Ś]

Please use Format for that. You want to use single format tag so setting styles in no the right way to go here. Please use below:

var editor = CKEDITOR.replace( 'editor1', {
	format_tags : 'p;h1;h2;h3;h4;h5;h6;pre;address;div;figure',
	format_figure : { element: 'figure' } /*, attributes: { 'class': 'custom_class_name_from_contents.css' }*/
});

You can style your figure element with custom class put in contents.css.

[Piotrek Koszuliński]

The question is why (and if - I didn't check) it works in the format plugin but not in the styles combo. They both use the style system in a very similar way.

[Jakub Ś]

I have checked style in full package in every browser with enter mode set to P, Div and BR. It works fine as well.

I have used default editor and only altered the sample:

var editor = CKEDITOR.replace( 'editor1', {
	stylesSet	: [ { name: 'Figure', element: 'figure' } ]
});

@Reinmar if it pleases you I will leave this ticket open. @osvaldas if possible, please provide exact steps to reproduce this problem in default editor.