How to apply classes instead of inline css style in TinyMCE

Question

I'm using the the advimage TinyMCE plugin.

When I open the advanced image dialogue, and choose to justify an image to the left, it adds style="float:left" to the image tag.

However, I'm removing the style attribute from all tags when I sanitize the output.

Is there a way to have TinyMCE add classes, instead of inline css code, by default?

For example, instead of:

style="float:left"

I would like to have added:

class="float-left"

Answer 1

Aside from using the content_css "styles" dropdown, which is usually loaded with lots of css classes you'd never use or present to a typical editor, there is also the Custom Formats option which gives very fine grain control over which classes are applied and what they can be applied to, and you can also override the default TinyMCE formats:

http://tinymce.moxiecode.com/wiki.php/Configuration:formats

Example:

tinyMCE.init({
    formats : {
        alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
        aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
        alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
    }
});