I solved the problem by override the downcast
and upcast
methods of image2 plugin (as Reinmar has suggested).
This method processes the image element before it is processed when the editor.getData()
method is called.
Therefore, the following code represents a possible solution:
CKEDITOR.on("instanceCreated", function (ev) {
ev.editor.on("widgetDefinition", function (evt) {
var widgetData = evt.data;
if (widgetData.name != "image" || widgetData.dialog != "image2") return;
//Override of upcast
if (!widgetData.stdUpcast) {
widgetData.stdUpcast = widgetData.upcast;
widgetData.upcast = function (el, data) {
var el = widgetData.stdUpcast(el, data);
if (!el) return el;
var attrsHolder = el.name == 'a' ? el.getFirst() : el;
var attrs = attrsHolder.attributes;
if (el && el.name == "img") {
if (el.styles) {
attrs.width = (el.styles.width + "").replace('px', '');
attrs.height = (el.styles.height + "").replace('px', '');
delete el.styles.width;
delete el.styles.height;
attrs.style = CKEDITOR.tools.writeCssText(el.styles);
}
}
return el;
}
}
//Override of downcast
if (!widgetData.stdDowncast) {
widgetData.stdDowncast = widgetData.downcast;
widgetData.downcast = function (el) {
el = this.stdDowncast(el);
var attrsHolder = el.name == 'a' ? el.getFirst() : el;
var attrs = attrsHolder.attributes;
var realWidth, realHeight;
var widgets = ev.editor.widgets.instances;
for (widget in widgets) {
if (widgets[widget].name != "image" || widgets[widget].dialog != "image2") {
continue;
}
realWidth = $(widgets[widget].element.$).width();
realHeight = $(widgets[widget].element.$).height();
}
var style = CKEDITOR.tools.parseCssText(attrs.style)
if (attrs.width) {
style.width = realWidth + "px";
delete attrs.width;
}
if (attrs.height) {
style.height = realHeight + "px";
delete attrs.height;
}
attrs.style = CKEDITOR.tools.writeCssText(style);
return el;
}
}
});
});