CKEditor：如何在自定義插件中為iframe對話框添加圖形預加載器？

Question

我創建了一個使用iframedialog元素的CKEditor（4.4.4）插件。 我遇到的問題是，對話框（屬性）編輯器中iframe的內容可能需要花費幾秒鍾來加載。 同時，用戶只是坐在那里想知道UI的位置，直到它神奇地出現為止。

理想情況下，我想在加載iframe時隱藏iframe，顯示預加載器圖形，並在加載后隱藏圖形並顯示iframe。

我已經研究過使用元素定義的“ setup”和“ onContentLoad”函數來處理此問題，我似乎找不到找到使它起作用的方法。 我也（未成功）研究了直接更改plugins / iframedialog / plugin.js的方法，但我想避免這樣做。

Answer 1

原來“ 設置 ”是使用錯誤的東西。 “ onShow ”是我想要的。

這是我的完成方式：

onShow: function (e) {
    var iframeId = this._.frameId;
    loader = setTimeout(function () {
        $("#" + iframeId).hide();
        $("#" + iframeId).after("<div id='" + iframeId + "-loader' class='preloader-small'></div>");
    }, 250);
},

onContentLoad: function () {
    clearTimeout(loader);
    $("#" + this._.frameId + "-loader").hide();
    $("#" + this._.frameId).show();
}

我必須使用setTimeout，否則它根本不起作用。 我可以將其設置為“ 1”，它仍然可以工作，但是我選擇了更大的數字，因此快速/緩存的加載不會顯示圖形。