Hello.
I'm using version 4.3.4.
My question is - how can I prevent editor from setting the width and height of image in style attribute rather that in "width" and "height" attributes?
In previous version (4.0.2) I put a code in config.js file, which changed the width and height in style to image attributes. But the same hack in the newest version does not work, because the editor automatically changes width and height attributes to styles. Even when I switch to "Source" mode and I enter the "width" and "height" attributes - they are changed to styles once I switch of from "Source" mode.
I tried to use the extraAllowedContent setting in config.js file like this:
CKEDITOR.editorConfig = function( config ) {
config.extraAllowedContent = 'img[width,height]';
}
but it didn't help. The editor still strips the width and height attibutes of an image.
I managed to get it work by placing following line in config.js:
config.allowedContent = true;
but this is not the solution I want to work with.
Where and how should I modify code (perhaps in /plugins/image/dialogs/image.js?) to make it work the way I want? I'm not really good at JS and can't manage to find the best solution.
I do not want to use the Enhanced Image plugin (http://ckeditor.com/addon/image2), because it does not have all the image options as the original one (for example you cannot set the class for image there).
Any help would be greatly appreciated, as I'm stuck with this matter for about couple of days now, and any solutions found on the net did not work for me as expected.
Regards,
Anna
I think that you would like
I think that you would like to wait (a couple of days - ETA is 16th of April) for CKEditor 4.4. It will have couple of features which will solve your problems.
First of all, why is CKEditor changing dimensions in attributes to styles? That's because since CKEditor 4.1 there's the Allowed Content Filter taking care of "normalizing" the loaded content. It finds that the img{width,height} rule is allowed, so it transforms attributes to these styles. However, it wouldn't do that if these styles weren't allowed, but attributes were - in such case it would do opposite. So how can you disallow img{width,height}? This is where CKEditor 4.4 helps - it will introduce config.disallowedContent, so if you'll set extraAllowedContent to 'img[width,height]' and disallowedContent to 'img{width,height}' editor will automatically start converting all styles to attributes. Note, however that it applies only to data loading/retrieving. So if you want to hava no styles inside editor (when creating new images) you still need to use the old hack.
And the second cool thing in CKEditor 4.4 will be styleable widgets. You'll be able to define styles that will be available in the Styles drop down and when applied to widgets (e.g. image2) will add defined classes to them. So if that's enough for you, and you don't necessarily need to set classes in the image dialog, then I guess you'd like image2 :).
PS. The CKEditor 4.4 is now during a testing phase, and most likely there won't be any changes before official release, so you can clone the repository and test it (4.4 is in the major branch).
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+