Pre-load CKEditor assets

Question

I'm using CKEditor inline feature. I initiate a new editor instance every time the user hovers over a text area. The problem is that when the user hovers and focuses on a textarea for the first time, the editor toolbar takes a couple of seconds to appear because the editor is loading all the necessary assets.

My question is: How can I pre-load all the necessary CKEditor assets during an onclick event instead of when the user hovers a text area?

I tried adding all the assets in the HTML file and the editor appears instantly, however when I look at the DOM, the file assets are sourced twice. Meaning even when the files are already present, CKEditor still loads them.

Answer 1

You could go ahead and initialize the instances of the editor normally, but set visibility of the toolbar header and footer to hidden and reduce their height to 0. Then on hover you'll set the height to auto, and visibility to visible.

CKE Editor Javascript adds inline styles for height on the toolbar, so you'll need the !important declaration on the height.

https://jsfiddle.net/ucytmjj5/4/

span.cke_top,
span.cke_bottom {
  visibility: hidden;
  height: 0px !important;
}

div.cke:hover span.cke_top,
div.cke:hover span.cke_bottom {
  visibility: visible;
  height: auto !important;
}

Answer 2

You can instantiate a dummy editor on page onload or onclick . Keep dummy editor hidden using display: none . When your dummy editor is loaded, it will load all the assets and next time when you display the editor it won't reload the assets. Simple!

Answer 3

You could try showing the text area after CKEDITOR instance has been created. For example.

 CKEDITOR.on('instanceCreated', function(evt) { evt.editor.element.setStyle("display", "block"); }); CKEDITOR.replace('editor1'); 

 #editor1 { display: none; } 

 <script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script> <textarea id="editor1"></textarea> 

Answer 4

You could reuse the same instance of the editor every time, but replace the editor's text with the value of textarea that the user hovers over. That way the editor will only load once and be reused.

Answer 5

Try using CDN versions of the assets, if it fixes your problem then it may be a server issue.

If you are using assets from a server that doesn't have cache policies or policies that don't let the browser cache, the browser may be downloading these files more than once.