How I can add a class to an element in tinymce4

Question

I've just switched to tinymce4 and I can't understand why I can't add a class to a selected element.

What I want to do is to add the "lightbox" class to an "a" element linking to a big version of an image.

To add the class in the format menu I've created a custom css, then in the tinymce config object I've passed:

'content_css'    : 'admin/tinymce.css'
importcss_append : true,
importcss_groups : [{title: 'Special classes'}]

With this code I see the "Special Classes" submenu under format.

If I select an a tag and from "special classes" menu I click on "lighbox" class I get this code:

<span class="lightbox"><a href="bigimage.jpg" class="lightbox"><img src="thumbnail.jpg" /></a></span>

But what I want is:

<a class="lightbox" href="bigimage.jpg" class="lightbox"><img src="thumbnail.jpg" /></a>

Any help?

Answer 1

I've found a solution, in the config object I've added:

style_formats: [{title: 'Special Classes', 
                 items: [
                        {title: 'Lighbox', selector: 'a', 'classes': 'lightbox'}
                        ]}

In this way, if I select an a tag and add the format "Lightbox" it adds the class to the right element without adding the span element.