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 fiel

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

Answer 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.

Answer 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).