CODEWITHSUNDEEP
phpjavascriptcsstinymcewysiwyg
John
John

Reputation: 351

TinyMCE add class to img tag

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!

Upvotes: 6

Views: 10490

Answers (3)

michalzuber
michalzuber

Reputation: 5215

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

tinymce class list

Upvotes: 21

OptimusCrime
OptimusCrime

Reputation: 14863

TinyMCE has support for this.

When adding a new image (Insert/Add Image-popup), click the tab that says Appearance. In the dropdown that says Class, chose Value and enter no-style. I think you can customize TinyMCE to support your own classes (ie, it is already listed), but I am not sure how you can do that. Looking at the documentation should help, if you do not want to type it in manually each time.

Edit: Ah, I did not look at the picture before I answered. It looks like you have an outdated version of TinyMCE. On the webpage the dropdown described above is available: Official site.

Superedit: If you already have the last version, take a look at the plugins you are loading. Take a look at the source from the official site and compare it to your own.

Upvotes: 1

Carlos Eduardo Evangelista
Carlos Eduardo Evangelista

Reputation: 82

Try put your code on html mode in tinyMCE.

Upvotes: -3

Related Questions