Loading Multiple CKEditors is Slow

问题

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.

回答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

回答2:

but the total number of ckeditors on the web page is almost 425.

Have you ever tried to open any application 425 times at the same time? 425 tab in your browser, 425 Wordpads, 425 of whatever? I don't think so.

So the answer is very short - you're doing it wrong. You should not initialize all editors at once. Load them on demand when needed and destroy when not needed. User can't edit 425 text at the same time anyway.

The longer answer is that classic editor is the heaviest one because it uses <iframe>. So when you initialize 425 you initialize 425 iframes. Inline editors are much lighter. There's also a divarea plugin which makes the classic editor use inline editable element instead of <iframe>, so it's lighter too.

But the answer is still - you're doing it wrong.

回答3:

The best way to approach it is to activate each editor instance on focus or via a button. Or even cooler would be to edit the text in a popup or a popover, this way it can be destroyed when the html is saved releasing the resources.

Also include your script files into the header of HTML rather than loading them dynamically (way slower and bad for caching).

来源：https://stackoverflow.com/questions/24169476/loading-multiple-ckeditors-is-slow

标签

ckeditor

page-load-time