強制CKEditor image2插件在syle中設置寬度和高度

Question

我使用的是CKEditor 4.4，我嘗試使用ACF強制image2插件將width和height設置為CSS屬性（在style屬性中），而不是使用相應的<img>標簽屬性。

editor.getData() ，我現在使用editor.getData()方法得到的是這樣的：

<img src="text.jpg" width="100" height="100" />

但我想要這種其他形式：

<img src="text.jpg" style="width:100px;height:100px" />

我試圖去夠使用這個結果allowedContent和disallowedContent在config.js文件。 這是我想什么（見本為參考）：

//Allow everything
config.allowedContent = {
    $1: {
        // Use the ability to specify elements as an object.
        elements: CKEDITOR.dtd,
        attributes: true,
        styles: true,
        classes: true
    }
};

config.disallowedContent = "img[width,height]";

這樣，結果就是不再設置width和height （既不作為屬性也不作為樣式），無法調整圖像的大小，並且“圖像屬性”對話框不再包含與圖像尺寸有關的輸入框。

我也嘗試過推Marco Marco Cortellino在此StackOverflow答案中提出的解決方案，但沒有取得積極的結果。

有人能幫我嗎？

Answer 1

我通過覆蓋image2插件的downcast和upcast方法解決了這個問題（正如Reinmar所建議的）。

在editor.getData()方法時，此方法先處理圖像元素。

因此，以下代碼代表了一種可能的解決方案：

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;
            }
        }
    });
});