I'm trying to upgrade to CKEditor 4 and am having trouble getting ACF to leave (or convert to) image width and height in attributes, not styles.
I don't want to restrict allowedContent, so that's set to true, but CKEditor still always converts width and height to styles, so I'm trying to remap it using ACF like this:
CKEDITOR.on('instanceReady', function(ev) {
ev.editor.filter.addTransformations([['img: sizeToAttribute']]);
});but that does nothing - changing it to 'img{width,height}' doesn't either.
The example code given in the addTransformations docs suggests I might need a monster white list of every possible tag and attr just so I can change an attribute on one of them.
I'd like this to be set globally as I never want these in styles - is there a better way than setting it in that event handler?
How should I do this?
Have you checked this sample
Have you checked this sample page?
Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn
If you think you found a bug in CKEditor, read this!
I hadn't seen that one, but
I hadn't seen that one, but it doesn't cover what I'm after anyway.
There are limits to what ACF
There are limits to what ACF can do. It works in a global way so it can't do everything people want, I'm told. You can always propose a new feature request here.
Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn
If you think you found a bug in CKEditor, read this!
I'm pretty sure it should be
I'm pretty sure it should be able to do it - it's about the simplest case I can think of (it's simpler than all the examples on the page you linked to) and it's using a built-in transformer (sizeToAttribute) that does exactly what I need - I just can't make it work and the docs are a bit thin...
It could well be a bug - setting allowedContent to true is supposed to disable all transformations, but it clearly doesn't.
I managed to make it work!
CKEDITOR.on('instanceReady', function(ev) { ev.editor.filter.addTransformations([['img{width,height}: sizeToStyle', 'img[width,height]: sizeToAttribute']]); });This works! This is like the table example in the docs, though I'm not clear why it's necessary to have both rules. I'm guessing it transforms from some internal representation of width and height to a style tag, then converts the style tag to attributes.
It does not work for me.....
Hey, I copied and pasted the above code in my .aspx file as it is but it does not work for me.
I do have allowedcontents:true.
Any idea why it is not working for me? Can you put some steps to have this working? Where to put the above code in my code base etc.
Thanks for your help though!