title: Style: Image float right in the editor
body: <p>I need to be able to float images to the right or left, in the ckeditor, as in this example:</p>
  
  <p><a href="http://ckeditor.com/demo#widgets" rel="nofollow">http://ckeditor.com/demo#widgets</a> (see under Enhanced images)</p>
  
  <p>I've downloaded the plugin and I've added the following code to my ckeditor-replace:</p>
  
  <pre><code>extraPlugins: 'image2',
            removePlugins: 'loremipsum, texttransform, liveedit',
      image2_alignClasses: [ 'image-left', 'image-center', 'image-right' ],
      image2_captionedClass: 'image-captioned'...
  </code></pre>
  
  <p>Then, in my css-file, I floated the classes to their respective values: left, right (when I choose to float the image to the right, under the source, I see that it is given the class image-right). So far so good, but like I said, the changes need to occur in the ckeditor. The user needs to see how his document will look like.</p>
  
  <p>Where, or what, in the styles, do I need to change the behavior in the ckeditor? I checked the style documentation, but it's still unclear to me how I manipulate the classes (if that's what I need to do).</p>
  
  <p>For instance, this:</p>
  
  <pre><code>var style = new CKEDITOR.style( { element: 'img', attributes: { 'class': 'foo' } } );
  </code></pre>
  
  <p>I figured I'd need to target the class image-right and give it a float, right.</p>
  
  <p>Suggestions?</p>