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”，它仍然可以工作，但是我选择了更大的数字，因此快速/缓存的加载不会显示图形。