Patching TinyMCE For Better Left/Right Aligned Images

12:50p.m., Wed 9 Dec 2009

I'm working with TinyMCE, both on work projects and on the admin interface for this site. It's a javascript library that overlays a WYSIWYG interface onto standard HTML textarea form elements. I have a kind of love-hate relationship with TinyMCE. Like any WYSIWYG tool that writes HTML mark-up it can generate a load of junk markup. However, it seems to be one of the best currently supported libraries, plus, since I've lifted up the hood and poked around, I'm less inclined to switch to an alternative library.

One of the annoying behaviours I get from TinyMCE is the graceless way it handles the floating/aligning of images.

Here's how to re-create the problem:

1 - add an image using the adv_image plug-in

2 - Select the image by clicking on it and hit the align left (or align right) button

3 - What TinyMCE does now is align the image in a pretty blunt manner. It adds a style attribute to the image.

The HTML markup will look something like this:

Before:

<img src="blah.jpg" alt="blah">

After:

<img src="blah.jpg" style="float:left;" alt="blah">

The problem with this is that a paragraph of text that follows the image will now butt right up against the edge of the image itself. The problem also occurs for right-aligned images but it's less noticeable since words wrap before hitting the edge of the image.

I tried googling for a solution to this problem. A ton of people had raised the issue but I didn't find a suitable solution. The closest I got were these two suggestions.

Suggested Solution 1 - Add a custom class

You can add custom classes to your TinyMCE plugin. This technique works, but it's an unintuitive user habit. You select the omage and then choose a style from the dropdown. The drop-down, by default, includes styles for H1-H6 and standard paragraph settings. If you are the only one using your instance of TinyMCE this might suffice. But I wouldn't advise using this in a CMS that will be used the a team of editors. It might also appeal if you don't offer the left/right/center align buttons but I fear that my users will just use the alignment buttons (and live with the ugliness) before they discover the custom style hidden away in the drop-down.

Suggested Solution 2 - Use an Advanced CSS Selector

img[align="left"] {
    margin-right:6px
}

But that's no good for Internet Explorer 6, which I'm aiming to support. The preferred solution is to add a class to any left-aligned image and a different class value to a right-aligned image.

I've patched TinyMCE to achieve this. The code is below, I hope it helps somebody.

I've used class values of align-left and align-right. This isn't terribly semantic. But then, allowing editors to use a WYSIWYG isn't terribly semantic-friendly idea in the first place, so stop bleating at the back ('cos I know you're there ;).

Here's the patch to tiny_mce_src.js (you'll have to compress this file into tiny_mce.js if that's how your configs are set up).

I'm using Tiny MCE Version 3.2.5 released 29th June 2009. But this chunk of code has been in there a long time without changing. It might be on a different line number for your version, but it'll probably still be in there.

1372    case 'float':
1373+      tinymce.DOM.removeClass(n, 'align-left');
1374+      tinymce.DOM.removeClass(n, 'align-right');
1375+      if (v != "") tinymce.DOM.addClass(n, "align-" + v);
1376       isIE ? s.styleFloat = v : s.cssFloat = v;
1377       break;

Now all that remains is to add a suitable CSS declaration to your site's files. Something like the following should suffice:

img.align-left {
    float:left;
    margin-right: 10px;
    margin-bottom:5px;
}

img.align-right {
    float:right;
    margin-left: 10px;
    margin-bottom:5px;
}

Useful Links

• TinyMCE homepage
• Issue Thread on TinyMCE support
• Issue raised on Drupal Support Forum
• Wikipedia entry on TinyMCE
• Adding custom styles to your TinyMCE