CKEditor : 맞춤 플러그인에 iframe 대화 상자의 그래픽 프리 로더를 어떻게 추가합니까?

Question

iframeedialog 요소를 사용하는 CKEditor (4.4.4) 플러그인을 만들었습니다. 내가 겪고있는 문제는 대화 상자 (속성) 편집기에서 iframe의 내용을로드하는 데 몇 초가 걸릴 수 있다는 것입니다. 그동안 사용자는 마술처럼 나타날 때까지 UI가 어디에 있는지 궁금해합니다.

로드하는 동안 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"로 낮게 설정할 수 있으며 여전히 작동 할 수 있지만 더 높은 번호를 선택하여 빠른/캐시 된로드가 그래픽을 표시하지 않도록했습니다.