TinyMCE add class to img tag

Question

I am using TinyMCE editor as a stand alone editor in my CMS.

The site, by default puts a curved border around any image tags within the cms div ID.

I need to have the option, within the CMS to bypass by adding a class="no-style" on the rare occasion a image being added to a page shouldn't have the CSS border. However I do not see any way to do this with TinyMCE..

All I see is a way to enter style tags, but this won't work since the code I am using in CSS to make the borders is this:

-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); behavior: url(js/PIE.htc);

so to take all those to 0px everytime I need to do a image with no border is time consuming and not to mention too much for the average person.

So on this page: http://d.pr/i/wslc

Is there a way to have a dropdown or a text box where someone can type in "just like style" a class name, such as no-style which would be in the style.css taking those properties I have above to zero?

Thanks!

Answer 1

You need to define a list of predefined classes according to https://www.tinymce.com/docs/plugins/image/#image_class_list

Adding the following to tinymce.init

image_class_list: [
    {title: 'None', value: ''},
    {title: 'Lightbox', value: 'lightbox'},
]

Outputs