CKEditor asset preloading

Question

I use the built-in CKEditor function. I start a new instance of the editor every time a user hovers over a text area. The problem is that when the user first hovers over the text field and focuses on the text field, the editor toolbar takes a couple of seconds, because the editor loads all the necessary resources.

My question is: how can I preload all the necessary CKEditor resources during the onclick event, and not when the user hovers over the text area?

I tried adding all the assets to the HTML file and the editor appears instantly, however, when I look at the DOM, the file resources arrive twice. Meaning, even if the files are already present, CKEditor still downloads them.

Answer 1

You can continue and initialize editor instances in normal mode, but set visibility to the title and footer of the toolbar to hide their height to 0. Then, when you hover, set height to auto and visibility to visible.

The CKE Javascript editor adds inline styles for height in the toolbar, so you need a !important declaration in 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 create an instance of a text editor on the onload or onclick page. Keep the hidden editor hidden with display: none . When your dummy editor is loaded, it will load all assets, and the next time you exit the editor, it will not reload assets. Plain!

Answer 3

You can try to show the text area after creating an instance of CKEDITOR . For instance.

 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 can reuse the same editor instance each time, but replace the editor text with the textarea value that the user is hovering over. Thus, the editor will load only once and reuse.

Answer 5

Try using CDN versions for assets, if it fixes your problem, then it could be a server problem.

If you use assets from a server that does not have cache policies or policies that do not allow browser cache, the browser may download these files more than once.