Loading Multiple CKEditors is Slow

Question

I have a lot of ckeditors on one web page for students to enter their data. I have a lot of ckeditors because each one is for one variable. Unfortunately, an input text field is too small for the data requested. The problem is that it takes too long for the web page to load and sometimes the web page hangs.

I'm currently loading almost 425 editors.

Here's an example of my code for three:

<script type='text/javascript'>//<![CDATA[
    $(window).load(function () {
        CKEDITOR.on('instanceReady', function (ev) {
            var jqScript = document.createElement('script');
            var bsScript = document.createElement('script');

            jqScript.src = 'http://code.jquery.com/jquery-2.0.2.js';
            bsScript.src = 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js';

            var editorHead = ev.editor.document.$.head;
            editorHead.appendChild(jqScript);
            editorHead.appendChild(bsScript);
        });

        // Load CK Editor
        CKEDITOR.replace('editor1', {
            contentsCss: 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'
        });
        // Load CK Editor
        CKEDITOR.replace('editor2', {
            contentsCss: 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'
        });
        // Load CK Editor
        CKEDITOR.replace('editor3', {
            contentsCss: 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'
        });
    });//]]>
</script>

I followed the performance guidelines on ckeditor, searched Stackoverflow for answers and it still isn't working. I even have the ckeditor toolbar minimized to just one row. I figure there has to be a way to load the ckeditors without having to load ALL the ckeditors and the contentCss when the page loads, but when the ckeditor is needed. Any help would be greatly appreciated.

Answer 1

Yes according to @Roman answer, you should only initialize ckeditor when the input field is click then if it loses focus, destroys it.

$('.editable').click(function() {
  editor = CKEDITOR.replace(this);
  editor.on('blur', function(e)
  {
    var okToDestroy = false;

    if (e.editor.checkDirty()) {
       // get data with e.editor.getData() and do some ajax magic
       okToDestroy = true;
     } else {
       okToDestroy = true;
     }

    if (okToDestroy )
      e.editor.destroy();

  });
});

Here .editable is your input field. Reference: link here