2017-08-17 7 views
0

私はテキストエリアでCKEditorを使用しています。ページが読み込まれるたびに、テキストエリアが適切にCKEditorとしてレンダリングされる小さな遅延があります。CKEditorがロードされているときにスピナーを読み込む

エディタが表示されていないテキストエリアが読み込まれている間に読み込みスピナーアニメーションを表示したいと思います。

私はここで述べたようにアプローチを続けましたが、https://ckeditor.com/forums/FCKeditor-2.x/Loading-Animationですが、エディタが正しくレンダリングされてもイメージは回転し続けます。また、最終的にレンダリングされるまで、テキストエリア/エディタを表示しないようにしたいと思います。

あなたはここにフィドルを表示することができます。https://jsfiddle.net/mevzqwsa/10/

<html> 
    <body> 
     <div id="board" style="position:absolute; left:10px"> 
     <img src="http://i.stack.imgur.com/MnyxU.gif"> 
     </div> 
     <textarea id="editor1" name="editor1" rows="10" cols="80"></textarea> 
     <script src="//cdn.ckeditor.com/4.7.1/standard/ckeditor.js"></script> 
     <script> 
     function FCKeditor_OnComplete(editorInstance) { 
      document.getElementById('board').style.visibility = 'hidden'; 
     } 
     CKEDITOR.replace('editor1'); 
     </script> 
    </body> 
</html> 

おかげトンを事前に!

答えて

2

あなたはこれを達成するためにCKEDITOR.editor.instanceReadyイベントを使用することができます。

CKEDITOR.replace('editor1', { 
    on: { 
     instanceReady: function(evt) { 
      document.getElementById('board').style.visibility = 'hidden'; 
     } 
    } 
}); 

Working fiddleを。

+0

正確に。 instanceReadyイベントは、エディタインスタンスが完全に初期化され、ハンドラ内でスピンナを削除する必要がある場合に発生します。 –

関連する問題