TinyMCE Clearing Plugin

A screenshot of the TinyMCE formatting toolbar.

A Simple Solution to a Common Problem

At Boston University, users of our WordPress installation continually encountered problems with image alignment. WordPress let them float images to the left or right of text, but there was no easy way to clear that float and move on to a new line underneath the image. Our advice was to switch to the HTML editor and add inline CSS each time they wanted to do this. It worked, but we thought our clients should be able to focus on their content, not on messing with code.

To solve this problem, I developed a plugin for TinyMCE, the JavaScript-based visual editor that's used in WordPress. The plugin adds a button to the TinyMCE formatting toolbar. When users click the button, it inserts the code <br style="clear:both;" />. Folks can use their backspace key to delete it, the same way they would delete any other new line.

An inline style might not be what I'd choose if I were writing my own theme, but the advantage of this approach is that the plugin is not dependent on CSS that may or may not exist in a theme.

I ran my icon design past my coworkers, asking things like, "What do you think this button does?" I revised the icon and behavior based on their input. We noticed in testing that if you highlighted text and clicked the button, the text would disappear. In a sense, that's reasonable - if you highlight text and click the "insert symbol" button, the editor will replace your text with a symbol - but it's different from the way that formatting tools work. Is the button inserting something, or is it formatting something? It's kind of an open question.

To avoid confusion, I set the button to be disabled while text is selected and enabled only when no text is selected. This sort of behavior already occurs (in reverse) with the TinyMCE link button.

Now, instead of fighting with the visual editor and sending in support tickets, users can just click a button.

Read about other projects I've worked on.