Trying to transition to ckeditor from fckeditor, but the image alignment handling keeps preventing that.
Specifically, when I use the image tool and insert an image and select left align, ckeditor styles it with a float left instead of align=left.
So I started hunting for where this styling comes from.
Is it supposed to come form ckeditor.styles.js?
What I have there is

name : 'Image on Left',^M
                    element : 'img',^M
                    attributes :^M
                    {^M
                            'style' : 'padding: 5px; margin-right: 5px',^M
                            'border' : '2',^M
                            'align' : 'left'^M
                    }^M

Similar stuff for 'Image on Right'
So why doesn't the editor use this styling when I insert an image? Is IMCE interfering in some way?

How can I get it to use the styling I want?

Comments

aharown07’s picture

aharown07 commented
Title: Why isn't my ckeditor using ckeditor.styles.js for image align styling? » How to change default image styling for left and right

OK... figured out that this styles.js file relates to the Styles button/dropdown. So I can get it do what I want. But it's an additional step I'd like to avoid. Is there is a way to get inserted images to use different styling by default?

Edit: On second thought, even the styles button doesn't seem to behave differently after editing the .js file... even after flushing cache.

(Maybe I have an install problem. Copied the ckeditor files from ckeditor.com/download to the folder with the copy_here.txt.... but am I really supposed to have two ckeditor.styles.js files, one in modules/ckeditor and one in modules/ckeditor/ckeditor?)

mkesicki’s picture

mkesicki commented

You should have one ckeditor.styles.js file in sites/all/modules/ckeditor directory.

aharown07’s picture

aharown07 commented

Instructions say to put the contents of the zip file in the ckeditor folder, but the zip file contains a ckeditor folder so... probably it means put the contents of the zip file's ckeditor folder in the ckeditor module's ckeditor folder?

I think I'll delete it all and start over.

Edit: OK, got that part straightened out... there are a couple of versions of the ckeditor zip file at ckeditor.com/downloads. One of them says "Drupal"... and that one appears to contain the entire Drupal module plus the ckeditor files in the proper folder (don't know what ver of the module it is). So if people use that one after installing the ckeditor module, they'll end up with two copies of the module, one nested in the other.

But my initial question remains: how can I get the photo inserting tool to use different styling by default?

aharown07’s picture

aharown07 commented

I've been combing through files in both the ckeditor drupal module and the ckeditor app. So far, I can't find the code that is responsible for wrapping images with float left or float right.

I'm tempted to think IMCE is the culprit, but when I use IMCE with fckeditor, left and right aligned images are not wrapped in floats by default. They get the old "align=left" etc.
So it seems like investigating IMCE would be a waste of time.

Anyone got any ideas where that code might be? I don't want to have to train my content creators in an additional step to fix the image styling manually when we switch to ckeditor (we don't have this problem w/fckeditor). So I'm quite willing to live w/a hack if necessary. As it is, I have enough hacks in my modules to necessitate maintaining a list. So one more item on it is no biggy.
I just can't figure out where to hack this.

castawaybcn’s picture

castawaybcn commented

I think the answer is that the Filtered HTML input filter strips out css classes. You can use one of the modules described in this page to allow some css classes in your input filter.

dczepierga’s picture

dczepierga commented
Status: Active » Closed (works as designed)

@aharown07, try to disable "Limit allowed HTML tags" filter (in Security filters of CKEditor profile and in filters on used input format) and install WYSIWYG Filter module instead (remember to enable it in Security Filters of CKEditor profile and on used input format), after this everything should work as u expect (if you configure it correctly on user input format).

If sth still not works or u have more questions pls reopen this issue.

Greetings

aharown07’s picture

aharown07 commented

Thanks, but it can't be a filter problem.
It all works fine with Fckeditor with exactly the same filter set up. ... and, in any case, I use full html when creating nodes.