TinyMCE Image Alignment

TinyMCE has always been a little difficult to align images. Either the align tag, or adding style="float: left;" has been it solution. Ideally I would just like to add class="left" or class="right" so that I can set the border and margins of the image.

Up until now the only way to do this without using the advimage plugin was to insert the image, then select it, the select a style from the style menu.

Ideally I should be able to use the align control in the image dialogue to set the alignment class or use the alignment controls on the toolbar when in the main editing window.

I have just again starte开发者_JAVA技巧d looking at a solution to this, now that IE6 is finally starting to die, I can use CSS attributes in selectors, so

IMG[style="float: left;"] {}

Works, but I would rather use a class incase there are any other style attributes which will cause the selector to fail. And it doesn't work in IE6, and you know some corporate clients will still be running the bloody thing!

So I looked through the TinyMCE documentation and found the formats configuration option, that seems to allow you to specify how tinyMCE applies code for various operations. Here I can add the IMG tag as a selector, and have classes: "left" for the alignleft function.

This applies the class correctly when the alignment is selected from the toolbar, but it still writes an inline style when the alignment is selected through the image dialogue.

Am I doing something wrong or is there a better way of doing this that will allow my clients to select image alignment from both the image dialogue and the toolbar, whilst applying a class to the image?

Hi this can be accomplished by using the advimage plugin, and enabling style (small bug in the wiki) as valid element. Also update your version of tinymce, as I read in the forum that there has been some problems with positioning in the latest versions.