Loading Spinner while CKEditor loads

Question

I am using CKEditor on a textarea. Whenever the page loads, there is a small delay where the textarea is rendered as a CKEditor properly.

I would like to have a loading spinner animation display while the editor was loading with no textarea displayed, as opposed to the messed up textarea.

I followed the approach as mentioned here - https://ckeditor.com/forums/FCKeditor-2.x/Loading-Animation, but the image keeps spinning even after the editor is rendered properly. Also, I would like the textarea/editor not to be displayed at all until it is finally rendered.

You can view the Fiddle here: 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>

Thanks a ton in advance!

Stanislav Kvitash Stanislav Kvitash · Accepted Answer · 2017-08-17T17:37:19

You can use CKEDITOR.editor.instanceReady event to accomplish this:

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

Working fiddle.

Loading Spinner while CKEditor loads

1 Answers