I'm transitioning to ckeditor from fckeditor... Got a problem with how images are being styled.
In FCKeditor, images I insert via IMCE are wrapped in classes for alignleft and alignright, which I have css for in my theme.
CKeditor doesn't do this the same way... not entirely clear to me what it's doing (inlcudes a style= statement with floats either left or right rather than align= after the img tag) but I'm wondering how I might go about making it handle images the FCKeditor way? I like to have differing padding for left align than I do for right align.

Comments

aharown07’s picture

Title: image styling » image styling - align the fckeditior way?
jcisio’s picture

When I don't know if there is a setting in CKEditor (let's have the developers answered), I'd like to solve it other way.

You want to modify the padding of img. I think you do it on the client side, right? Because if you have it done on server side (with PHP), just a little regex skill can do the trick.

OK, now on the client side, how do you do it? I'm curious ;-) I guess you attach a class with jQuery like this:

$("img[align]").each(function(){
  // check $(this).attr("align") here and do a addClass
});

If my guess is correct, so this is the solution: $(this).attr("align") needs to be changed to $(this).css("align")

aharown07’s picture

I'm not sure it's actually assigning a class (other than the .content one that comes from php but isn't img specific). The CSS I use is a bit unusual looking and I don't remember anymore where I found this solution.
Here's my CSS...

.content img[align="left"] {
padding: 5px 10px 0 0px;
}
.content img[align="right"] {
padding: 5px 0px 0 10px;
}

This works whenever the html is like this....
<img align="left" alt="whatever" height="225" width="300" src="/sites/default/files/images/file.jpg" width="300" />

But ckeditor uses no "align=" value, and the html looks like this...
<img alt="" src="/sites/default/files/images/file.jpg" style="float: left; width: 432px; height: 324px; " />

So I've done some CSS fiddling with my theme and I can add padding to the images inserted ckeditor style, but I can't give them different padding css for right and left align because there is no "align" being assigned. If there is a way to do that with float I'm not aware of how. I'd just assume not use float.

I suppose it would work just as well to configure ckeditor to include padding values for right and left in its "style=" statement, but I don't know where to do that.

(I don't have any regex or js skills at all... I just cut and paste. Sometimes I can follow the logic a little)

wwalc’s picture

Status: Active » Fixed

Styles combo + predefined class is the only reasonable solution afaik to get rid of inline styles: http://dev.ckeditor.com/ticket/5322

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

iantresman’s picture

I too was having problems adding either left or right margins/padding to right and left aligned images. (HSPACE adds space to both sides, which is not wanted). This CSS hack seems to work for me, and is based on the CKeditor add an inline style attribute, such as this one (provided by aharown07 in #3 above):

<img alt="" src="/sites/default/files/images/file.jpg" style="float: left; width: 432px; height: 324px; " />

Using CSS attribute selectors (more), the following does the trick:

img[style*="left"]  {margin-right:20px}
img[style*="right"] {margin-left:20px}

The "*=" (asterisk equals) means that the attribute contains the specified value.