What you see is not always what you get

As I've mentioned before setting up a Wysiwyg in Drupal has become a straightforward job. A popular method is using the Wysiwyg module in combination with CKEditor. Enable the module, install the editor library and make sure to allow the <img> tag in your input format and you're good to go, right? Sadly, this is not always the case. It's important to note that as a security measure all input formats except the 'Full HTML' format remove all attributes from an html tag. This means that even though the image option in your favorite Wysiwyg editor allows you to align an image to the right and setting a margin, your input format will remove these attributes. Here's a clean example of CKEditor using the standard align and margin functionality:

Using the default 'Filtered HTML' input format and allow the img tag, this renders the following output:

What we saw in the Wysiwyg is definitely not what we see in the actual output because the input format removed the attributes that we set to style and position the images.

So how can we fix this? In Drupal core, we can not: the only option you have is to enable the 'Full HTML' filter, which is not advisable. Your best option is to install the Wysiwyg Filter module which enables a whole range of extra settings for input formats, allowing you to select which attributes, classes and properties should be allowed for which html tags. Such as the 'align' attribute and 'margin' property for images.