Modifying the `clear` attribute of an image with TinyMCE

Question

I'm using TinyMCE with the tinymce-django app in my Django website. I am using it in the admin interface to edit HTML fields. (Something like a flatpage.)

When adding images with TinyMCE, how can I change their clear style attribute?

Answer 1

You need to have clear included in the valid elements rules (or the extended valid elements), or TinyMCE will strip it out.

Answer 2

First go to the image popup. After selecting image, navigate to Appearance tab.

If you don't see this popup, make sure that the editor mode is advanced and the plugin advimage is included.

Now, you have two options to do so:

1. CSS class. You have to define, for example, .clear { clear: both; } in your CSS stylesheet. In TinyMCE you will see the class, select clear. If you don't see your class that's probably because you didn't include the stylesheet in content_css, but you can still select (value) and type it yourself.
2. CSS style. Add clear: both; (or right/left, whatever you need), in the style row.

I've made an screenshot of both options, you need only one of them:

It is possible to edit the style manually, in HTML popup. If the editor is intended for developers, then this is the easist approach, and probably also the fastest one.