WYSIWYG and TinyMCE stripping out float: left

Question

I've got the WYSIWYG module installed and the TinyMCE javascript library as well. I've created a text format "Rich Text" which is similar to Filtered HTML but I've added more allowed tags.

I insert an image into my text and I set it to align left which adds float: left to the markup. However, when I save and view the page, the float: left has been stripped out.

I can't find any options in the WYSIWYG configuration or my "Rich Text" format that allows me to control this. Am I missing it somewhere?

Why is my float: left getting stripped out?

Answer 1

My solution:

I downloaded a new module called WYSWIWYG Filter. On my Text Format, I turned off the Limit allowed HTML tags option and instead enabled the WYSIWYG Filter option. Then below in the WYSIWYG Filter settings, I configured the allowed HTML elements like so:

a[!href|target<_blank|title],
div[align<center?justify?left?right],
p[align<center?justify?left?right],
br,span,em,strong,cite,code,blockquote,ul,ol,li,dl,dt,dd,
img[!src|alt|title|style|width|height|typeof],
@[style|title]

And I checked all the boxes to allow margins, padding, floating, etc.

Answer 2

You can do some of this (if I remember correctly) from a given WYSIWYG profile preferences. You can add custom classes to apply to elements such as:

float left=float_left

then you make a CSS rule .float_left: { float: left } ;

You may find the WYSIWYG_Filter module to be helpful in your needs.

Basically the WYSIWYG editor allows only certain things by default for safety. Drupal Input Formats further limit/allow what is allowed.

Answer 3

This does not help your exact question, but it is best to avoid WYSIWYG editors, it can often end up messing up the code or at least putting it in a way you cannot understand or draw sense from.