TUTORIAL: Overriding left and right alignment in the WYSIWYG editor

One minor annoyance of TinyMCE (and most WYSIWYG) editors is that the standard alignment option for images uses the "align" attribute on the <img> tag. This, unfortunately, tends to look butt ugly. So most of us end up creating custom styles for alignment (float: right, etc) and training our clients to ignore the Alignment option and use the Class option instead.

Some of our clients are not this bright.

Thus, I’ve come up with a little technique that overrides the "align" attribute with the CSS style of your choosing. Easy for the client to set, but you control what it looks like. Since this works beyond MODx, I’ve posted a tutorial here:

Overriding alignment in <img> tags

Hope you find this useful. Viva MODx!

Andrew

More goodies from Sparkplug

This solution uses javascript. With MODx, the same thing can be accomplished using a plugin to parse the finished document and do the relevant replacements before the document is sent off; no javascript required.

A great point, Susan!

The plug-in route is definitely the more elegant solution for MODx (although you can see by the first comment in my tutorial that plain old CSS solves this in everything but IE6 anyway).

If nothing else, hope this inspires some folks to think about the possibilities.

Thanks!

Andrew