I am trying to force CKEditor to set image width and height as attributes, not styles. When using allowedContent, it filters out all the other tags. When using extraAllowedContent, I am able to use border, hspace and vspace as attributes, but the height and width are constantly being forced back into the style attribute of the image tag.
I also tried adding code to the config.js file to replace the width and height defined in the style with the width and height attributes, but it doesn't work - it keeps getting reset to the style.
Any help would be greatly appreciated!
F.
Solution found!
I'm not sure how or why this works, but I solved my issue, and thought I'd leave my solution for future reference.
<script>
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'img[alt,border,width,height,align,vspace,hspace,!src];'
} );
CKEDITOR.config.allowedContent = true; // this was the line of code that fixed my issue. I found it in a post by jduty on an unrelated thread.
</script>
In the config.js file, I added a function to replace the style elements with a width/height attribute (I don't recall where I found this code, but I assume it would have worked on its own in version 3 - this didn't work without the one line of code above):
CKEDITOR.on('instanceReady', function(ev) {
// Ends self closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.htmlFilter.addRules({
elements: {
$: function(element) {
// Output dimensions of images as width and height
if (element.name == 'img') {
var style = element.attributes.style;
if (style) {
// Get the width from the style.
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
width = match && match[1];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
var height = match && match[1];
// Get the float from the style.
match = /(?:^|\s)float\s*:\s*(\w+)/i.exec(style);
var float = match && match[1];
if (width) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
element.attributes.width = width;
}
if (height) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
element.attributes.height = height;
}
if (float) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)float\s*:\s*(\w+)/i, '');
element.attributes.align = float;
}
}
}
if (!element.attributes.style) delete element.attributes.style;
return element;
}
}
});
});
Hopefully this will help someone else as I couldn't find this solution anywhere else.
F.