Using CSS Classes for Image Alignment in TinyMCE

I had a problem with aligning images in the TinyMCE editor in Umbraco 4.7.1.1. There are two ways a user can align images: a) Using the paragraph alignment button, and b) Using styles defined for the editor. We wouldn’t need option b) at all except that, when you have margins automatically applied to the images, things can get messy. Even then, annoyingly enough, option b) doesn’t always work, depending on what tag the image is nested in. So I searched for a better solution. I wanted the user to be able to still use the alignment tool, but I wanted the tool to apply class instead of using the style attribute to the float the image.

Eventually, I found a blog post, Patching TinyMCE For Better Left/Right Aligned Images, by Gareth Senior, that included a simple solution to my problem. Gareth included code for a simple patch that made all my TinyMCE dreams come true. I’ll include the same code here, only I’ll also document how I implemented the changes in Umbraco.

The simple change is made to the tiny_mce_src.js. Normally, you make the changes to tiny_mce_src.js, then minify the file and use the minified version. The Umbraco installation includes a minified version of the file, but apparently it’s not used. I made the following changes to umbraco_client/tinymce3/tiny_mce_src.js, and it fixed things for me really nicely:

3469    case 'float':
3470+      tinymce.DOM.removeClass(n, 'align-left');
3471+      tinymce.DOM.removeClass(n, 'align-right');
3472+      if (v != "") tinymce.DOM.addClass(n, "align-" + v);
3473       isIE ? s.styleFloat = v : s.cssFloat = v;
3474       break;

This will add the class “align-left” or “align-right” to the image when the alignment options are used from the tool bar. You can then use those to create styles that will compensate for the margins.

NOTE: Be sure to clear the browser cache, or the browser will hold on to the old version and it will seem like it did nothing. Oh and remember that you’ll have to make this change again when you upgrade Umbraco as the upgrade will replace the edits.

Edit: 5/16/2012 – This also works in Umbraco 4.7.2.

Advertisements

9 thoughts on “Using CSS Classes for Image Alignment in TinyMCE

  1. Cool, I’ve just found another way to do this. At around line 16390, you can modify the default formats applied to elements when buttons are pressed, so to add classes to images, change it to something like this:

  2. abrahala says:

    Just a bit of update on this topic: it is possible to achive the same without any patching, using the configuration object only:
    tinyMCE.init({
    // (…other initialization here…),
    formats: {
    alignleft: [
    {selector: ‘img,table’, collapsed: false, classes: ‘align-left’}
    ],
    aligncenter: [
    {selector: ‘img,table’, collapsed: false, classes: ‘align-center’}
    ],
    alignright: [
    {selector: ‘img,table’, collapsed: false, classes: ‘align-right’}
    ]
    }
    });

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s